css - CSS 中的 'containing block' 和 'block container box' 有什么区别？

Question

我正在阅读 CSS 规范，关于 Visual Formatting Model 的部分并试图了解这两个术语之间的区别:containing block和 block container box .

让我感到困惑的是用于似乎完全不同的概念的单词的变化:

box对比 block

containing对比 container

是 block同 box在谈论可视化格式化 CSS 时？如果不是，有什么区别？这两个都是在屏幕上“可见”的东西吗？

一般情况下，看到 block应该怎么想在规范中？当我阅读 box 时，我首先想到的是什么？在规范？

这些概念的一些有用的隐喻或类比将非常有助于创建一个心智模型。

Answer 1

让我们从头开始。 CSS 几乎完全是关于盒子的。一个盒子只是 Canvas 的一个矩形区域。 Canvas 是绘制所有内容的整个 2D 空间。

CSS Boxes 有各种各样的风格。块框、块级框、内联框、内联级框、内容框、内边距框、边框框、边距框、表格框、行框、 flexbox 等等。它们都只是矩形区域。

所以块只是一种盒子。上面的许多盒子都以两种行为为特征——它们相对于它们的容器和对等点的布局方式，以及它们的内容在其中的布局方式。 CSS 显示规范将这些称为 display-outside和 display-inside分别

Display-outside 是指盒子的“*级”性质。他们不是我们在这里感兴趣的。

所有的块盒，以及一些行内级的盒都是块容器盒。一个块容器盒子是一个“块容器”类型的盒子，不一定是一个包含块的盒子。不是块级盒子的块容器包括那些 display:inline-block和 display:table-cell
“块容器”中的“块”是指其内部显示行为。块框在其中垂直排列，文本水平流动，通常受矩形边缘的限制。

所以“块容器盒”是一种盒子。相反，“包含块”是指特定的盒子。 Canvas 上定义的每个框都有一个包含块，只有一个异常(exception)，称为 initial containing block ，它没有包含块。

只有“块容器盒”类型的盒子才能成为盒子的包含块。

是时候举个例子了。假设我们有下面的 HTML: 我有意使用 <span>元素贯穿始终，因为这完全是关于 CSS，我不想与 HTML 行为混淆。

<span id="level1">
  foo
  <span id="level2">
    bar
    <span id="level3">
      baz
      <span id="level4">
        qux
      </span>
    </span>
  </span>
</span>

CSS 非常简单。只是

#level1 { display:inline-block }

其他跨度是 CSS 默认显示设置，“内联”。

现在，考虑 #level4跨度。它的父级是“#level3”跨度，即 display:inline所以“#level3”跨度不会形成块容器框。同样， #level2 span 也不会形成块容器框。但是 #level1元素是 display:inline-block .这形成了一个行内级别的盒子，但它是一个块容器盒子。 (这就是“内联块”的意思)。

因此，由 #level2 形成的所有内联框的包含块, #level3 , #level4 spans 和它们的文本内容是由 #level1 形成的块容器框。元素的盒子。