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

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元素和匿名片段("更多常规文本")表现为内联级别的框,显然与语句"如果块容器盒内有块级盒子"相矛盾,那么我们强制它具有唯一块级盒子里面".它还与块容器只能包含所有块级框或所有内联级框的声明相矛盾,因为段元素中的"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>