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

Question

我正在阅读CSS规范，有关视觉格式模型的部分，并试图了解这两个术语之间的区别：containing block和block container box。

使我感到困惑的是，似乎完全不同的概念所使用的单词的变化形式：

• box 与 block
• containing 与 container

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

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

这些概念的一些有用的隐喻或类比对创建心理模型非常有帮助。

Answer 1

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

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

因此，积木只是盒子的一种。上面的许多盒子都具有两种行为-相对于它们的容器和同位体如何布置，以及它们的内容如何在其中布置。在CSS-显示规范指的是这些作为显示外部和显示内部分别

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

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

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

因此，一个“块容器盒”是一个类型的盒子。相反，“包含块”是指特定的框。画布上定义的每个框都只有一个包含块，只有一个例外，称为初始包含块，其中没有包含块。

只能将“块容器盒”类型的盒子作为盒子的包含块。

时间为例。假设我们有以下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元素的盒子。