構建靜態頁面之 [ 盒子模型 ]

coordinate35 發布于2019-08-02 11:21 / 1859人閱讀

摘要：盒子模型描述每一個元素都可以叫做是盒子模型盒子模型的組成內容區元素中內容文本圖片等等內邊距內容區到邊框的距離邊距內容區的邊界外邊距盒子與盒子之間的距離屬性表示設置元素的邊框屬性是簡寫屬性可以分為表示邊框的寬度表示邊框的樣式

盒子模型 描述

每一個元素都可以叫做是盒子模型

盒子模型的組成

內容區 - 元素中內容（文本、圖片、等等）

內邊距 - 內容區到邊框的距離

邊距 - 內容區的邊界

外邊距 - 盒子與盒子之間的距離

border屬性

表示設置元素的邊框

border屬性是簡寫屬性,可以分為

border-width - 表示邊框的寬度

border-style - 表示邊框的樣式

border-color - 表示邊框的顏色

簡寫順序: 邊框寬度邊框樣式邊框顏色

border屬性也可以按照上、右、下、左四個方向進行劃分來分別設置

分別設置邊框時，設置的順序固定不變的：上、右、下、左


    
    邊框

border-radius屬性

表示設置元素邊框的圓角

屬性值表示為圓的半徑

當屬性值等于元素寬度的一半時,會得到一個圓形

也可以寫多個屬性值,順序為: 左上角右上角右下角左下角


    
    邊框的圓角

padding屬性

表示設置元素內邊距

內邊距可以分上、右、下、左、四個方向進行設置

也可以同時寫多個值分別設置，設置的順序固定不變的：上、右、下、左

內邊距無法設置顏色，會顯示與背景相同的顏色

設置內邊距時會改變元素本身的大小


    
    內邊距

margin屬性

表示設置外邊距

外邊距也可以分上、右、下、左、四個方向來分別進行設置

在設置上外邊距和左外邊距時會影響到元素本身的顯示位置

在設置下外邊距和右外邊距時會影響到下一個相鄰元素的顯示位置


    
    外邊距

外邊距的重疊

兩個垂直方向排列的相鄰元素分別設置上外邊距和下外邊距時，顯示出的效果并不是兩個數值相加，而是只顯示兩個數值中大的

在水平方向排列的相鄰元素分別設置左外邊距和右外邊距時，不會出現外邊距重疊的效果


    
    外邊距的重疊

外邊距的傳遞

表示在父子結構中，如果子級設置上外邊距，父級也會一起調整顯示位置

外邊距傳遞的效果只會在父子結構中子級設置“上外邊距”才會出現

解決方法

通過為父級設置上內邊距來調整子級想要顯示的位置

因為：子級的上外邊距等于父級的上內邊距

注意：在設置內邊距時會改變元素本身的顯示大小


    
    外邊距的傳遞

元素的水平居中

外邊距也可以用來實現元素的水平方向居中

margin: 0 auto; - 固定寫法

auto - 表示自適應

外邊距水平方向的屬性值必須為 auto ，垂直方向的屬性值可以根據需求來設置

在設置時，目標元素的寬度不能等于父級元素的寬度


    
    元素水平居中

box-shadow屬性

表示設置盒子模型的陰影

屬性值有

水平方向偏移量

垂直方向偏移量

模糊度

顏色


    
    盒子模型

box-sizing屬性

表示改變盒子模型的類型

content-box屬性值

表示標準盒子類型（默認值）

會改變元素的顯示大小

最終顯示寬度 = 寬度 + 內邊距（左、右） + 邊框（左、右）

最終顯示高度 = 高度 + 內邊距（上、下） + 邊框（上、下）

border-box屬性值

表示怪異盒子類型

不會改變元素的顯示大小

最終顯示寬度 = 寬度

最終顯示高度 = 高度


    
    盒子模型的類型

GPU云服務器云服務器盒子模型 jsp 設置頁面之 asp單文件頁面模型靜態頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52931.html

構建靜態頁面之 [ 盒子模型 ]

摘要：盒子模型描述每一個元素都可以叫做是盒子模型盒子模型的組成內容區元素中內容文本圖片等等內邊距內容區到邊框的距離邊距內容區的邊界外邊距盒子與盒子之間的距離屬性表示設置元素的邊框屬性是簡寫屬性可以分為表示邊框的寬度表示邊框的樣式盒子模型描述每一個元素都可以叫做是盒子模型盒子模型的組成內容區 - 元素中內容（文本、圖片、等等）內邊距 - 內容區到邊框的距離邊距 - 內容區的...

teren 2019-08-29 16:32 評論0 收藏0
【靜態頁面架構】CSS之盒子模型

摘要：架構盒子模型以內容區顯示文本和圖像內邊距內容區至邊距的距離邊距內容區的邊界外邊距元素的邊框之間的距離邊距屬性簡寫屬性用來設置邊距的上右下左。 CSS架構盒子模型；以內容區(顯示文本和圖像) 內邊距(內容區至邊距的距離) 邊距(內容區的邊界) 外邊距(元素的邊框之間的距離) 1.邊距； border屬性；簡寫屬性用來設置邊距的上(top)右(right)下(bottom)左(lef...

fanux 2019-08-29 16:34 評論0 收藏0
CSS學習筆記(六) 元素定位

摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認是定位上下文定位。 1.盒模型盒模型，就是瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。這些盒子們都要按照可見版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評論0 收藏0