Question

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

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

box与block
containing与container

在谈论视觉格式CSS时，block是否与box相同？如果没有，有什么区别？这两种东西都是在屏幕上“可见”的吗？

通常，当我在规范中看到block时应该怎么看？当我阅读规范中的box时，首先应该想到什么？

对这些概念进行一些有用的隐喻或类比将有助于建立心理模型。

Answer 1

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

CSS盒具有多种口味。块框，块级框，内联框，内嵌级框，内容框，填充框，边框，边距框，表格框，线框，伸缩框等。它们都是矩形区域。

因此，积木只是盒子的一种。上面的许多盒子都有两个行为特征-相对于它们的容器和同位体如何布置，以及它们在内部的内容布置方式。 CSS显示规范将它们分别称为display-outside和display-inside

显示外部是指框的“ *级”性质。他们不是我们在这里感兴趣的。

所有块盒和某些内联级别的盒都是块容器盒。块容器框是“块容器”类型的框，不一定是包含块的框。不是块级框的块容器包括display:inline-block和display:table-cell

“块容器”中的“块”是指其内部显示行为。块状框在其中垂直放置，文本水平排列，通常受矩形边缘限制。

因此，“块容器盒”是类型的盒。相反，“包含块”是指特定的框。画布上定义的每个框都只有一个包含块，只有一个例外称为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范围也不会形成块容器框。但是#level1元素是display:inline-block。这形成一个内联级别的框，但它是一个块容器框。（这就是“内联块”的意思）。

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

CSS中的“包含块”和“块容器盒”有什么区别？

1 个答案: