包含塊
一個元素的佔用面積大小以及佈局定位通常受到 包含塊(Containing Block) 的影響,比如 top
和 left
取百分比時相對的長度是什麼長度, width
和 height
取百分比時相對的長度是什麼長度?
包含塊一般情況下是當前元素的最近的祖先塊元素的 內容區域 ,但具體還需要分情況來確定。
佈局區域
瀏覽器渲染文件時,對於每一個元素,都會有一個佈局盒子,該盒子又被劃分為四個區域。
- 內容區域—— Content Area
- 內邊距區域—— Padding Area
- 邊框區域—— Border Area
- 外邊距區域—— Margin Area
box-sizing 設為 border-box,會影響 width 和 height 的計算,但不影響佈局區域的劃分。
確定包含塊
根據元素的 position
屬性值來確定它對應的包含塊:
- 如果是根元素,那麼就是視窗
- 如果
position
屬性值是static
(不設定時的預設值)或者relative
是,那麼包含塊就是它最近的祖先塊元素或塊格式化上下文(如浮動元素、表格單元格、彈性元素、網格元素等)的 內容區域 。 - 如果
position
屬性值是fixed
,那麼包含塊是視窗,除非滿足 5 的條件 - 如果
position
屬性值是absolute
,那麼包含塊是最近的position
屬性值不是static
的祖先元素的 內邊距區域 ,除非滿足 5 的條件 - 如果
position
屬性值是absolute
或fixed
,包含塊也可能是滿足以下任一條件的的最近的祖先級元素的 內邊距區域 :
– transform
或 perspective
屬性值不是 none
– will-change
的屬性值是 transform
或 perspective
– filter
屬性值不是 none
或 will-change
屬性值是 filter
(僅 Firefox)
根據包含塊計算百分比值
部分屬性使用百分比值時,計算值根據這個元素的包含塊計算而來,包括:
1. height
、 top
和 bottom
中的百分比值,通過包含塊的 height
值。如果包含塊的 height
值會根據它的內容而變化(如沒設定 height 或設為 auto),而且包含塊的 position
屬性值時 relative
或 static
,那麼這些計算值為 0
2. width
、 left
、 right
、 padding
、 margin
這些屬性的百分比值通過包含塊的 width
屬性值來計算。
詳細例項參考 MDN 文件 。