包含块

一个元素的占用面积大小以及布局定位通常受到 包含块（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