包含块

包含块(containing block)

包含块可以理解为盒子的参考系。盒子的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值top,bottom,left,right，当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。在 CSS 规范中也是明确书写了的：https://drafts.csswg.org/css2/#containing-block-details

初始包含块（initial containing block）

根元素（HTML 元素）所在的包含块，被称之为初始包含块。对于浏览器而言，初始包含块的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。

resize会改变初始包含块，滚动不会。

包含块判定

• 常规流盒子，浮动盒子，固定定位盒子与粘性定位盒子，它们的包含块是离它最近的祖先块容器（block container）的内容盒（content area）。
• 固定定位盒子的包含块为视口。（与初始包含块不同）
• 绝对定位盒子的包含块是它祖先中最近的定位元素的填充盒(padding盒)，如果找不到定位元素则其包含块为初始包含块。

其他特殊情况(平移，透视，渲染边界，火狐的滤镜)

对于绝对定位盒子与固定定位盒子，包含块也可能是由满足以下条件的最近父级元素的填充盒组成的：

• transform 或 perspective 的值不是 none
• will-change 的值是 transform 或 perspective
• contain 的值是 paint (例如: contain: paint;)
• filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).