CSS 中的包含块（Containing Block）是一个非常重要的概念，它定义了元素在布局中的参考框架。元素的尺寸、位置和偏移量通常都是基于其包含块来计算的。理解包含块的概念对于掌握 CSS 布局至关重要。
1. 包含块的作用
- 定位元素 ：当使用
position: absolute;或position: fixed;时，元素的定位是相对于其包含块进行计算的。 - 百分比尺寸 ：如果元素的宽度、高度、外边距等属性使用了百分比值，则这些百分比值也是基于其包含块的尺寸计算的。
- 其他属性 ：如
transform的原点 (transform-origin) 和clip-path等也可能依赖于包含块。
2. 包含块的确定规则（重要）
一个元素的包含块 是如何确定的，取决于该元素的 position 属性以及其祖先元素的特性。
(1) position: static 或 position: relative
- 元素的包含块 是其最近的块级祖先元素的内容区域（content box）。
- 如果没有块级祖先，则默认为初始包含块。
html
<div class="container">
<div class="child"></div>
</div>
css
.container {
width: 300px;
height: 200px;
}
.child {
position: relative;
width: 50%; /* 相对于 .container 的内容区域 */
}.child 的宽高是基于 .container 的内容区域计算的，因此 .container 是 .child 的包含块。
(2) position: absolute
- 元素的包含块 是其最近的已定位祖先元素 （即
position值为relative、absolute或fixed的祖先元素）的内边距边界（padding box）。 - 如果没有已定位的祖先元素，则包含块 是初始包含块（通常是
<html>元素的视口）。
css
<div class="container">
<div class="child"></div>
</div>
css
.container {
position: relative;
width: 300px;
height: 200px;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 50%; /* 相对于 .container 的内边距边界 */
}.child 的 position: absolute; 导致它相对于 .container 定位，因为 .container 是它的最近的已定位祖先元素。因此，.container 是 .child 的包含块。
(3) position: fixed
- 元素的包含块 始终是初始包含块，即浏览器窗口的视口。
css
<div class="fixed-box"></div>
css
.fixed-box {
position: fixed;
top: 20px;
left: 20px;
width: 50%; /* 相对于视口的宽度 */
}.fixed-box 的 position: fixed; 导致它相对于浏览器窗口（视口）定位，因此它的包含块是初始包含块。
(4) position: sticky
- 元素的包含块 是其最近的滚动容器（scroll container），如果没有滚动容器，则是初始包含块。
css
<div class="scroll-container">
<div class="sticky-box"></div>
</div>
css
.scroll-container {
overflow: auto;
height: 200px;
}
.sticky-box {
position: sticky;
top: 20px;
}.sticky-box 的 position: sticky; 导致它相对于 .scroll-container 定位，因此 .scroll-container 是它的包含块。
(5) 初始包含块（Initial Containing Block）
- 初始包含块是整个文档的根元素（通常是
<html>元素）的包含块。 - 它的尺寸通常等于浏览器窗口的视口大小。
- 对于
position: fixed;和没有已定位祖先的position: absolute;元素，它们的包含块就是初始包含块。
3. 影响包含块的特殊情况
(1) transform 属性
如果某个祖先元素设置了 transform 属性（且值不是 none），那么该祖先元素会创建一个新的局部包含块 ，成为后代元素的包含块。
css
<div class="container">
<div class="child"></div>
</div>
css
.container {
transform: scale(1); /* 创建新的局部包含块 */
}
.child {
position: absolute;
top: 50px;
left: 50px;
}.container 的 transform 属性导致 .child 的包含块 变为 .container，而不是更远的祖先元素。
(2) will-change 属性
类似于 transform，如果某个祖先元素设置了 will-change: transform;，也会创建一个新的局部包含块。
(3) filter 和 perspective 属性
类似的，filter 和 perspective 属性也会导致祖先元素成为后代元素的局部包含块。
4. 包含块的关键点总结
- 包含块决定了元素的定位和尺寸计算。
- 包含块可以是：
- 祖先元素的内容区域（content box）。
- 祖先元素的内边距区域（padding box）。
- 初始包含块（视口）。
- 特殊情况下 ：
transform、filter、perspective等属性会创建新的局部包含块。
- 理解包含块的概念 对于正确使用
position和百分比布局至关重要。