理解 CSS 中的 Containing Block

前言

在开始本文之前先来看一个例子，下面一段简单的 html 代码，布局很简单：

    

  

1. 两个嵌套的 div，一个背景是红色，一个背景是黄色。

2. div parent 设置的宽高分别是 100px、100px。

3. div child 设置的宽高是 50%、50%。

让我们思考一下这段代码的运行效果应该是什么样子，然后看一下实际的运行结果是不是和我们思考的一样。

运行结果如下：

对于前端初学者来说可能会有这样的困惑，明明 child 的 width 和 height 分别设置的 50%、50%，那黄色背景的 child 的大小不应该是 width=50px、height=50px 吗？带着这个疑问我们来改一下代码如下：

给 parent 增加 transform: translate(20px, 20px);

.parent {
  height: 100px;
  width: 100px;
  transform: translate(20px, 20px); // 添加transform
  background-color: red;
}

保存之后在浏览器里运行，再看一下效果：

这次的运行效果和我们预期的一致了，黄色背景的 child width=50px、height=50px。

理解产生这个现象的原因，我们要知道 Containing Block。

transform 是 CSS 里的一个属性，它的取值很多，利用 transform 我们可以对元素进行旋转、缩放、平移以及元素歪斜（skew）

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Containing Block

在介绍 Containing Block 之前，先来复习一下 CSS 盒模型，以标准盒模型为例，html 里的每一个元素都有一个盒子，盒子由 Content、Padding、Border、Margin 组成。标准盒模型的 Content 区域就是我们设置的宽、高大小。

在 CSS 中元素的大小和位置是由 Containing Block（包含块） 决定。在大多数情况下，一个元素的 Containing Block 就是离它最近的 block 级 的盒子的 Content 区域。比如我们把上面的例子再改一改：

    

  

运行结果：

这是我们最熟悉的。接下来我们看看什么情况下 Containing Block 不是离它最近的 block 级 的盒子的 Content 区域。

Containing Block 的改变由元素的 position 属性决定。

1、position 值为 static、relative、sticky

如果 position 值为 static、relative、sticky，那么它的 Containing Block 就是离它最近的祖先块级元素的 Content 区域。或者是像 table、flex、grid 这种 formatting context。

position 默认值为 static

2、position 值为 absolute

如果 position 值为 absolute，它的 Containing Block 就是离它最近的 position 的值不是 static （也就是值为 fixed, absolute, relative 或 sticky）的祖先元素的 Padding 区域。

举个例子：