布局和包含块

包含块的影响

在学习如何确定元素包含块之前，先了解一下它的重要性。

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

如果 position 属性为 static、relative 或 sticky，包含块可能由它的最近的祖先块元素（比如说 inline-block, block 或 list-item 元素）的内容区的边缘组成，也可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身)。

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

如果 position 属性是 fixed，在连续媒体的情况下 (continuous media) 包含块是 viewport ,在分页媒体 (paged media) 下的情况下包含块是分页区域 (page area)。

如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

transform 或 perspective 的值不是 none

will-change 的值是 transform 或 perspective

filter 的值不是 none 或 will-change 的值是 filter（只在 Firefox 下生效）。

contain 的值是 layout、paint、strict 或 content（例如：contain: paint;）

backdrop-filter 的值不是 none（例如：backdrop-filter: blur(10px);）

备注：

根元素（）所在的包含块是一个被称为初始包含块的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。

备注：

perspective 和 filter 属性对形成包含块的作用存在浏览器之间的不一致性。

根据包含块计算百分值

如上所述，当某些属性被赋予一个百分比值时，它的计算值取决于这个元素的包含块。以这种方式工作的属性包括盒模型属性和偏移属性：

height、top 及 bottom 属性根据包含块的 height 计算百分比值。

width、left、right、padding 和 margin 属性根据包含块的 width 计算百分比值。

备注：

一个块容器（比如 inline-block、block 或 list-item 元素）要么只包含参与行级格式化上下文的行级盒子，要么只包含参与块级格式化上下文的块级盒子。只有包含块级或行级盒子的元素才是块容器。

示例

接下来的示例，都使用如下 HTML 代码：

html

下面的示例，只有 CSS 不同。

示例 1

这个示例中，P 标签设置为静态定位，所以它的包含块为