CSS佈局之盒子模型[一]
阿新 • • 發佈:2020-06-30
每個HTML標籤都會生成一個盒模型,盒模型是正常流佈局非常重要的概念。盒模型由內邊距(padding)
+長度(width)
+高度(height)
+邊框(border)
+外邊距(margin)
組成。
1. 寬度(width)和高度(height)
盒模型有2種型別,怪異盒模型
和標準盒模型
,在不同盒模型情況下寬度(width)
和高度(height)
計算方式會不同。
如果沒正確宣告<!DOCTYPE HTML>
檔案型別或設定box-sizing: border-box
CSS屬性,則會產生怪異盒模型,此時寬度(width)=內容區寬度+內邊距(padding)+邊框(border)
,高度也是這樣。
正確宣告<!DOCTYPE HTML>
檔案型別或設定box-sizing: content-box
CSS屬性時,會產生標準盒模型,此時寬度(width)=內容區寬度
,高度也是這樣。
// 寬度=內容區寬度+左右內邊距+左右邊框
// 高度=內容區高度+上下內邊距+上下邊框
box-sizing: border-box;
// 寬度=內容區寬度 高度=內容區高度
box-sizing: content-box;
2. 內邊距(padding)
內邊距指內容區跟邊框之間的距離,可通過padding(內邊距)
統一設定,也可通過上內邊距(padding-top)
、左內邊距(padding-left)
下內邊距(padding-bottom)
、左內邊距(padding-left)
單獨設定每一邊內邊距。
// 設定1個值
padding: 1px;
// 等價於
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
// 設定2個值
padding: 1px 2px;
// 等價於
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
// 設定3個值
padding: 1px 2px 3px;
// 等價於
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
// 設定4個值
padding: 1px 2px 3px 4px;
// 等價於
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
3. 邊框(border)
邊框指包裹內容區和內邊距的框框,可通過border
屬性統一設定(border-style(邊框樣式)
、border-width(邊框寬度)
和border-color(邊框顏色)
3個屬性的合併)。也可以通過border-top(上邊框)
、border-right(右邊框)
、border-bottom(下邊框)
和border-left(左邊框)
單獨設定。
3.1 邊框寬度(border-width)
邊框寬度表示邊框的粗細,可以取任意合法的長度單位值。
// 1個值:四條邊框都為1px
border-width: 1px;
// 2個值:上下邊框為1px 右左邊框為2px
border-width: 1px 2px;
// 3個值:上邊框為1px 右左邊框為2px 下邊框為3px
border-width: 1px 2px 3px;
// 4個值:上邊框為1px 右邊框為2px 下邊框為3px 右邊框4px
border-width: 1px 2px 3px 4px;
PS: 單獨設定跟內邊距差不多,如border-top-width:2px
3.2 邊框樣式(border-style)
邊框樣式可以取下面的值。
// 1個值:4條邊框都沒有樣式
border-style: none;
// 2個值:上下邊框樣式為實線,右左邊框樣式為雙實線
border-style: solid double;
// 3個值:上邊框為點狀 右左邊框為虛線 下邊框為繼承
border-style: dotted dashed inherit;
// 4個值:上右下左邊框樣式分別為:3D凹槽 3D壟狀 3D內側 3D外側
border-style: groove ridge inset outset ;
3.3 邊框顏色(border-color)
邊框顏色可取任意合法的顏色模式值。
// 1個值:4條邊框都為紅色
border-color: red;
// 2個值:上下邊框顏色為紅色,右左邊框顏色為黃線
border-color: red yellow;
// 3個值:上邊框為紅色 右左邊框為黃色 下邊框為藍色
border-color: red yellow blue;
// 4個值:上右下左邊框顏色分別為:紅色 黃色 藍色 綠色
border-color: red yellow blue green;
3.4 合併屬性
border
可以合併上面3個屬性。
// 1px、灰色的實線邊框
border: 1px solid grey;
4. 外邊距(margin)
外邊距是盒模型的最外一層,取值跟上面差不多。
// 1個值:4個外邊距都為1px
margin: 1px;
// 2個值:上下外邊距為1px 右左外邊距為2px
margin: 1px 2px;
// 3個值:上外邊距為1px 右左外邊距為2px 下外邊距為3px
margin: 1px 2px 3px;
// 4個值:上外邊距為1px 右外邊距為2px 下外邊距為3px 左外邊距為4px
margin: 1px 2px 3px 4px;
PS:也可以通過margin-top:1px這樣的方式來單獨設定外邊距