CSS 包含块

CSS 中的包含块（Containing Block）是一个非常重要的概念，它定义了元素在布局中的参考框架。元素的尺寸、位置和偏移量通常都是基于其包含块来计算的。理解包含块的概念对于掌握 CSS 布局至关重要。

1. 包含块的作用

• 定位元素 ：当使用 position: absolute; 或 position: fixed; 时，元素的定位是相对于其包含块进行计算的。
• 百分比尺寸 ：如果元素的宽度、高度、外边距等属性使用了百分比值，则这些百分比值也是基于其包含块的尺寸计算的。
• 其他属性 ：如 transform 的原点 (transform-origin) 和 clip-path 等也可能依赖于包含块。

2. 包含块的确定规则（重要）

一个元素的包含块 是如何确定的，取决于该元素的 position 属性以及其祖先元素的特性。

(1) position: static 或 position: relative

• 元素的包含块 是其最近的块级祖先元素的内容区域（content box）。
• 如果没有块级祖先，则默认为初始包含块。

<div class="container">
  <div class="child"></div>
</div>

.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> 元素的视口）。

<div class="container">
  <div class="child"></div>
</div>

.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

• 元素的包含块 始终是初始包含块，即浏览器窗口的视口。

<div class="fixed-box"></div>

.fixed-box {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 50%; /* 相对于视口的宽度 */
}

.fixed-box 的 position: fixed; 导致它相对于浏览器窗口（视口）定位，因此它的包含块是初始包含块。

(4) position: sticky

• 元素的包含块 是其最近的滚动容器（scroll container），如果没有滚动容器，则是初始包含块。

<div class="scroll-container">
  <div class="sticky-box"></div>
</div>

.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），那么该祖先元素会创建一个新的局部包含块 ，成为后代元素的包含块。

<div class="container">
  <div class="child"></div>
</div>

.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. 包含块的关键点总结

1. 包含块决定了元素的定位和尺寸计算。
2. 包含块可以是：
   • 祖先元素的内容区域（content box）。
   • 祖先元素的内边距区域（padding box）。
   • 初始包含块（视口）。
3. 特殊情况下 ：
   • transform、filter、perspective 等属性会创建新的局部包含块。
4. 理解包含块的概念 对于正确使用 position 和百分比布局至关重要。