视觉格式化模型中的块容器盒是什么？

Question

我正在尝试理解CSS2.1规范中描述的阻止容器框，但我很难接受它。该规范并未真正提供定义。他们只是说：

  

块容器框要么只包含块级框，要么建立内联格式化上下文，因此只包含内联级框。

同样根据规范，所有未替换的块级框（表框除外）都是块容器框。因此，body，div，p等都是块容器盒。

在匿名区块框下：

  

如果一个块容器盒里面有一个块级别的盒子，那么我们强制它在其中只有 块级别的盒子。

因此，在示例中：

<div>
  Some text
  <p>More text</p>
</div>

“某些文字”位于匿名区块框中。

好的，这有效，但是当我尝试这个例子时：

<div>
  <p>Some text</p>
  <em>Emphasized text</em>
  <em>More emphasized text</em>
  More regular text.
</div>

显示为：

  Some text.

  _Emphasized text_ _More emphasized text_ More regular text.

我希望

  Some text.

  _Emphasized text_

  _More emphasized text_

  More regular text.

换句话说，em元素和匿名片段（“More regular text”）表现为内联级别的框，显然与语句“如果块容器盒里面有块级盒子”相矛盾，那么我们强制它在其中只有 块级别的框。“它还与块容器只能包含所有块级框或所有内联级框的声明相矛盾，因为段元素中的“Some text”表现为块级框。

我在这里缺少什么？

Answer 1

<p>已经是一个块级元素，所以它就这样对待它。 <div>内的其他所有内容也被视为（单个）块级元素。规范并未说明每个单个元素将被视为单独的块级元素。只有它会将内部的所有内容视为块级元素。

因此在你的例子中

  <em>Emphasized text</em>
  <em>More emphasized text</em>
  More regular text.

这都被视为单个块级元素，其中包含多个内联元素。符合规范。

请注意，您可以通过显式执行此操作来控制此行为：

  <div>
    <em>Emphasized text</em>
    <em>More emphasized text</em>
    More regular text.
  </div>

或者对于您期望的结果，您可以这样做：

  <div><em>Emphasized text</em></div>
  <div><em>More emphasized text</em></div>
  <div>More regular text.</div>