识别匿名块框

Identifying Anonymous Block Boxes

我正在尝试理解这个 CSS 概念,Visual Formatting Model, specifically on this part, 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.

起初,从规范中暗示,我认为匿名块框只会应用于文本。 然而,在更复杂一点的例子中,似乎不对,就像这个:

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

some不能算作匿名块框而是整行some <em>text</em>。因为,如果只有 some 被认为是匿名块框,那么 <em>text</em> 将是另一个匿名块框;因此这两个匿名块框将不在同一行中。 因此,在 p 块框 and more <em>text</em>.

之后的另一个匿名块框也是如此

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

  1. 匿名块框:some <em>text</em>
  2. 方块盒子:<p>More text<p>.
  3. 匿名块框:and more <em>text</em>

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

最后,我能直接这样总结吗? 在匿名块盒生成的情况下,如果一个块容器一个块-level box inside,那么这个算法 — Box Generation 将treat 这个block container里面的任何boxes作为一个block-level boxes.通过这样做,任何不是 块级框 的框都将 internally/conceptually 视为 匿名块框 ,这基本上是一个块级盒子

我对这些事情理解正确吗?或者,我现在完全错了吗?

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 formatting context"、"block-level box"、"block container box" 和 "block box";请参阅我对这些问题的回答以获得更多说明: