- 盒子模型的定義
由margin, padding, border, width, height及內容構成佈局區域
- 盒子的寬高設定
標準的盒子大小, 由padding, border, width, height決定寬高
在開發中, 常用 box-sizing, 去改變盒子寬高的設定, 而IE的盒子模型便得到更好的體現
- 盒子的渲染規則
決定盒子內容的排版與盒子間的作用. 有BFC, IFC, GFC, FFC
- BFC
塊級格式化上下文, 即塊元素的內部排版規則
規定盒子垂直佈局
相鄰盒子margin會重疊
盒子從貼着容器側邊開始
不與容器外的浮動盒子重疊
浮動盒子參與容器高度計算
盒子不影響到容器外
觸發該規則
display爲flex等
float屬性不爲none
overflow不爲visible
position爲absolute或fixed
作用
避免相鄰盒子的margin重疊
解決浮動脫離文檔流導致重疊
解決浮動導致容器塌陷
- IFC
內聯格式化上下文, 即內聯元素的內部排版規則
規定不容許含有塊元素
水平佈局
盒模型的構成只有水平margin, padding, border及內容
觸發該規則
font-size
line-height
vertical-aligin
作用
解決內容垂直居中, 行高一致
- GFC
網格佈局, 通過 display: grid; 構成
- FFC
彈性佈局, 通過 display: flex; 構成
- 文獻
https://segmentfault.com/a/1190000017273573
https://segmentfault.com/a/1190000017273586?utm_source=tag-newest