html - 澄清 block 容器和 block 盒的定义

Question

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

最后 article它说:

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

---

如果它们是两个独立的概念，这让我对 block 盒/ block 的定义产生疑问， block 盒/ block 的定义首先被描述为:

a box generated by an element with display: block is called a "block box" or just a "block".

然后，在文章的末尾写道:

A block box is a block-level box that is also a block container.

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

Answer 1

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

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

假设你有

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

其中 section 和 div 是 display:block，span 是 display:inline code>，就像默认情况一样。

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

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

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"

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