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

Question

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

让我感到困惑的是用于表示完全不同概念的词的变体：

box 对比 block
containing 对比 container

在谈论视觉格式 CSS 时，block 是否与 box 相同？如果不是，有什么区别？这些都是屏幕上 "visible" 的东西吗？

总的来说，看到规范中的block应该怎么想？另外，当我阅读规范中的 box 时，我首先想到的是什么？

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

Answer 1

让我们从头说起。 CSS 几乎完全是关于盒子的。一个盒子只是canvas的一个矩形区域。 canvas 是绘制所有内容的整个二维 space。

CSS 盒装口味一应俱全。块盒、block-level 盒、行内盒、inline-level 盒、内容盒、填充盒、边框盒、边距盒、table 盒、行盒、弹性盒等。它们都是矩形区域。

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

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

所有方块盒，部分inline-level盒为方块容器盒。方块容器盒是 "block container" 类型的盒，不一定是包含方块的盒。不是 block-level 框的块容器包括那些 display:inline-block 和 display:table-cell

"block container"中的"block"指的是它的display-inside行为。块框在其中垂直放置，文本水平流动，通常受其矩形边缘的限制。

所以 "block container box" 是 类型的 盒子。相反，"containing block" 指的是一个特定的框。 canvas 上定义的每个框都有一个包含块，只有一个例外，称为 initial containing block，它没有包含块。

只有 "block container box" 类型的框才能成为框的包含块。

举个例子。假设我们有下面的 HTML：我将故意在整个过程中使用 <span> 元素，因为这都是关于 CSS 的，我不想与 [=75] 混淆=] 行为。

<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默认显示设置，"inline"。

现在，考虑 #level4 跨度。它的父级是'#level3' span，即display:inline 所以'#level3' span 不会形成块容器框。同样，#level2 跨度也不构成块容器框。但是 #level1 元素是 display:inline-block。这形成了一个 inline-level 盒子，但它是一个方块容器盒子。（这就是 "inline-block" 的意思）。

所以#level2、#level3、#level4span组成的所有行内框的包含块，其文本内容是[=18]组成的块容器框=] 元素的框。

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

What is the difference between 'containing block' and 'block container box' in CSS?

css

w3c