包含块

一个元素的占用面积大小以及布局定位通常受到包含块（Containing Block）的影响，比如 top 和 left 取百分比时相对的长度是什么长度，width 和 height 取百分比时相对的长度是什么长度？
包含块一般情况下是当前元素的最近的祖先块元素¹的内容区域，但具体还需要分情况来确定。

布局区域

浏览器渲染文档时，对于每一个元素，都会有一个布局盒子，该盒子又被划分为四个区域。

• 内容区域——Content Area
• 内边距区域——Padding Area
• 边框区域——Border Area
• 外边距区域——Margin Area

box-sizing 设为 border-box，会影响 width 和 height 的计算，但不影响布局区域的划分。

确定包含块

根据元素的 position 属性值来确定它对应的包含块：

1. 如果是根元素，那么就是视窗
2. 如果 position 属性值是 static（不设置时的默认值）或者 relative 是，那么包含块就是它最近的祖先块元素或块格式化上下文²（如浮动元素、表格单元格、弹性元素、网格元素等）的内容区域。
3. 如果 position 属性值是 fixed，那么包含块是视窗，除非满足 5 的条件
4. 如果 position 属性值是 absolute，那么包含块是最近的 position 属性值不是 static 的祖先元素的内边距区域，除非满足 5 的条件
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 文档。

参考资料

• 包含块（Containing Block）- MDN