CSS盒子模型

CSS盒子模型

1. 盒子模型的組成

CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素。

包括：邊框border、外邊距margin、內邊距padding、實際內容content。

2. 邊框border

div {
    border: border-width border-style border-color;
}

屬性	做用
border-width	邊框粗細，單位px
border-style	邊框樣式，solid(實線)、dashed(虛線)、dotted(點線)
border-color	邊框顏色，預約義值/十六進制/rgb()

線形	樣式
dashed 虛線	- - - - - - - -
dotted 點線	.................

屬性	做用
border-left	左邊框
border-right	右邊框
border-top	上邊框
border-bottom	下邊框

2.1 邊框寫法

簡寫：

border: 1px solid blue;/*沒有順序規定，通常按照這種順序*/

分開寫法：

border-top: 1px solid blue;/*只設定上邊框*/
border-right: 1px dashed red;/*只設定右邊框*/;
border-bottom: 2px solid #ccc;/*只設定下邊框*/
border- left: 3px dotted #123456;/*只設定左邊框*/

2.2 表格的細線邊框border-collapse

該屬性控制瀏覽器繪製表格邊框的方式，它控制相鄰單元格的邊框。

border-collapse: collapse;/*表示相鄰邊框合併在一塊兒*/

2.3 邊框影響盒子實際大小的解決方案

若是一個盒子加了邊框，會出現撐大盒子的狀況，所以有兩種解決方案。

1. 測量盒子大小的時候，不量邊框
2. 若是測量的時候包含了邊框，則須要width/height減去邊框寬度

3. 內邊距padding

內邊距：邊框與內容之間的距離。

屬性	做用
padding-left	左內邊距
padding-right	右內邊距
padding-top	上內邊距
padding-bottom	下內邊距

padding的簡寫屬性能夠有1~4個值。

值的個數	表達意思
padding: 5px	上下左右都是5px內邊距
padding: 5px 10px	上下5px，左右10px
padding: 5px 10px 15px	上5px，左右10px，下15px
padding: 5px 10px 15px 20px	上5px，右10px，下15px，左20px

3.1 內邊距影響盒子實際大小的解決方案

若是盒子已經有了寬度和高度，此時再指定內邊框，會影響盒子的實際大小，撐大盒子。所以有兩種解決方案。

1. 讓width/height減去多出來的內邊距大小
2. 若是盒子自己沒有指定width/height屬性，則此時padding不會撐開盒子

4. 外邊距margin

外邊距：控制盒子與盒子之間的距離。

屬性	做用
margin-left	左外邊距
margin-right	右外邊距
margin-top	上外邊距
margin-bottom	下外邊距

margin的簡寫和padding一致。

4.1 外邊距讓塊級盒子水平居中

利用外邊距讓塊級盒子水平居中所知足的條件：

1. 盒子必須指定了寬度
2. 盒子左右的外邊距都設置爲auto

常見的寫法：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;（建議使用）

注：行內元素、行內塊元素水平居中，給其父元素添加text-align: center;便可。

4.2 外邊距合併

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

4.2.1 相鄰塊元素垂直外邊距的合併

如上圖，出現了取兩個值中的較大者的現象，即爲相鄰塊元素垂直外邊距的合併。

解決方案：儘可能只給一個盒子添加margin值。

4.2.2 嵌套塊元素垂直外邊距的塌陷

如上圖，出現了父元素塌陷較大的外邊距值的現象，即爲嵌套塊元素垂直外邊距的塌陷。

解決方案：

1. 爲父元素定義上邊框
2. 爲父元素定義上內邊距
3. 爲父元素添加overflow: hidden;（推薦使用）

5. 清除內外邊距

這也是CSS的第一行代碼。

* {
    padding: 0;/*清除內邊距*/
    margin: 0;/*清除外邊距*/
}

注：

• 行內元素爲了照顧兼容性，儘可能只設置左右內外邊距
• 可是轉換爲塊級或行內塊元素就無要求