包含塊
摘要：
一個元素的佔用面積大小以及佈局定位通常受到 包含塊（Containing Block） 的影響，比如 top 和 left 取百分比時相對的長度是什麼長度， width 和 height 取百分比時相對的長度是什麼長度？
包含塊一般情況下是當前元素的最近的祖先塊元素的 內容區域 ，但...
一個元素的佔用面積大小以及佈局定位通常受到 包含塊（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 文件 。