包含块

影响

元素的尺寸和位置会受包含块的影响。如元素的某些属性设置百分比值时就是通过元素的包含块计算得来的。

包含块计算百分值

1. height, top, bottom中的百分比值是通过包含块的height的值计算得的。如果包含块的height是根据它内容变化，而且包含块的position属性值为static, relative，这些值的计算值为auto；

2. width, left, right, padding, margin，中的百分比值是通过包含块的width的值计算的。

确定包含块

确定包含块完全依赖position属性的值：

1. position属性值为static, relative, sticky元素的包含块可能由它最近的祖先块级元素（如inline-block, block, list-item元素）的内容区域（盒子模型的content-box）边缘组成。

2. position属性值为absolute元素的包含块由它最近的position值不是static（也就是值为relative, absolute, fixed, sticky）的祖先元素的内边距边缘组成。

3. position属性值为fixed元素在连续媒体下包含块是viewport(也就是window)（根元素html的包含块也是viewport），在分页媒体下包含块是分布区域。

4. 如果position的值为absolute, fixed，包含块也可能满足以下条件的最近父级元素的内边距边缘组成：

• transform, perspective的值不为none
• will-change的值是transform, perspective
• filter的值不是none或will-change的值是filter（firefox下生效）
• contain的值是paint
• backdrop-filter的值不是none