澄清块容器和块盒的定义

Question

我正在阅读这些 MDN CSS 参考概念文章，我发现术语令人困惑或不精确。

上一篇文章中说：

1. 块容器包含display: inline参与内联格式化上下文的元素（内联级框），或仅包含display: block参与块格式化上下文的元素（块级框）。这似乎是一个不切实际的定义，尤其是当我们刚刚了解到normal flowhas 的子元素同时具有display: block&时display: inline。这里有两个不同的概念还是我误解了？

---

2. 如果它们是两个独立的概念，这让我质疑块盒/块的定义，它首先被描述为：

由具有 display: block 的元素生成的框称为“块框”或简称为“块”。

然后，在文章的最后写道：

块盒是块级盒，也是块容器。

在第一个定义中，从技术上讲，元素 withdisplay: block可以出现在任何地方。第二个说它必须显示为仅包含块或内联的父级的子级。

Answer 1

HTML 元素不是 CSS 框。为单个 HTML 元素生成零个、一个或多个框。

您缺少的主要概念是匿名框。

假设你有

<section>
  <span>Foo</span>
  <div>Bar</div>
  Baz
</section>

其中section和divaredisplay:block和spanis display:inline，就像默认情况下一样。

现在“Bar”和“Baz”被包裹在匿名内联框中，并且跨度生成一个内联框。

此外，由于元素生成的块框section将包含行内框和块框，因此span“Baz”和“Baz”行内框将包装在匿名块框中。所以最终的盒子树看起来像这样。

Block Box             <= from `section` element
  +--- Block Box      <= anonymous block box
  | +--- Inline Box   <= from `span` element
  +--- Block Box      <= from `div` element
  | +--- Inline Box   <= anonymous inline box from "Bar"
  +--- Block Box      <= anonymous block box
    +--- Inline Box   <= anonymous inline box from "Baz"

从这里可以看出，没有任何块框同时包含块框和内联框作为直接子项，这就是您引用的段落所说的内容。