我正在阅读 CSS 规范,关于 Visual Formatting Model 的部分并试图了解这两个术语之间的区别:containing block
和 block container box
.
让我感到困惑的是用于似乎完全不同的概念的单词的变化:
box
对比 block
containing
对比 container
是
block
同 box
在谈论可视化格式化 CSS 时?如果不是,有什么区别?这两个都是在屏幕上“可见”的东西吗?一般情况下,看到
block
应该怎么想在规范中?当我阅读 box
时,我首先想到的是什么?在规范?这些概念的一些有用的隐喻或类比将非常有助于创建一个心智模型。
最佳答案
让我们从头开始。 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
形成的块容器框。元素的盒子。
关于css - CSS 中的 'containing block' 和 'block container box' 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56186202/