css - 识别匿名 block 框

Question

我正在尝试理解这个 CSS 概念，Visual Formatting Model ，特别是这部分，Controlling box generation .

来自 Anonymous Block Boxes 的规范，在他们的示例中有这样的标记:

<DIV>
  Some text
  <P>More text
</DIV>

这是他们的解释:

(assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

起初，根据规范，我认为匿名 block 框只会应用于文本。然而，在更复杂一点的例子中，它似乎不对，就像这个:

<div>
    some <em>text</em>
    <p>More text</p>
    and more <em>text</em>
</div>

some不能被视为匿名 block 框，而是整行 some <em>text</em> .因为，如果只有 some被认为是匿名 block 框，则<em>text</em>会是另一个；因此这两个匿名 block 框将不在同一行中。因此，在 p 之后的另一个匿名 block 框也是如此。积木盒，and more <em>text</em> .

所以，总共有 3 个 block 框(其中 2 个是匿名 block 框):

1. 匿名 block 框:some <em>text</em> .
2. block 框:<p>More text<p> .
3. 匿名 block 框:and more <em>text</em> .

看起来像这样: identifying anonymous block level boxes

最后，我可以直接这样总结吗？在匿名 block 框生成的情况下，如果一个 block 容器有一个 block 级框在里面，那么此算法 — Box Generation 将将 此 block 容器内的任何框视为 block 级框。通过这样做，任何不是 block 级框的框都将在内部/概念上被视为匿名 block 框，这基本上是一个 block -水平框无论如何。

我对这些事情的理解正确吗？或者，我现在完全错了吗？

Answer 1

Box Generation will treat any boxes inside this block container as a block-level boxes. And by doing so, any boxes that is not a block-level box will be internally/conceptually treated as an anonymous block boxes, which is basically a block-level box anyway.

不，它创建了带有内联格式化上下文的匿名 block 框，它包含了内联。内联(或任何其他不是 block 级框的框)不会改变。他们继续参与他们通常会参与的相同格式化上下文；该算法确保这些格式化上下文是由匿名 block 框建立的，匿名 block 框又参与与父元素相同的 block 格式化上下文。

插图大部分是正确的，除了主要的 block 级框并不总是建立 block 格式化上下文。您可能还会混淆术语“ block 格式化上下文”、“ block 级框”、“ block 容器框”和“ block 框”；请参阅我对这些问题的回答以获得更多说明:

• > CSS Spec: block-level box, block container box and block box
• > Block Level Element vs Block Formatting Context