Question

有疑问

以下标记呈现为块+内联+块

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p>

铬：

In 1912, - display: block
<em>Titanic</em> - display:inline
 sank on her maiden voyage. - display:block

Sitepoint链接表示2个匿名框（第1个和第3个）应该是内联的，以便将所有框保持在p内。但是chrome将p内部的框呈现为块和内联的混合。

块级别框可能包含行框或块级框，但不能同时包含。如有必要，属于此框元素的任何线框都包含在一个或多个（尽可能少）匿名框中，并带有'block'的'display'。

根据W3C建议，sitepoint内容似乎是正确的，但我在chrome块上的块级框（p）中混合使用了框。

再一点建议说，匿名框应该只是阻止与sitepoint材料相矛盾的。

请注意，此模块中定义的匿名框都是块级别，但在其他模块中定义的匿名框可能不同。

我的问题是：

1）是否所有3个框都是内联的？（浏览器渲染块+内联+块）

2）是否在W3C标准中提到了内联匿名框？

Answer 1

Visual Formatting Model中的第9.2.2.1节实际上与你的例子几乎相同，例如

任何直接包含在块容器元素内（不在内联元素内）的文本都必须被视为匿名内联元素。

在包含HTML标记的文档中：

<p>Some <em>emphasized</em> text</p>

<p>生成一个块框，其中包含几个内联框。 “emphasized”框是由内联元素（<em>）生成的内联框，但其他框（“Some”和“text”）是由块级元素生成的内联框（{{1 }}）。后者称为匿名内联框，因为它们没有关联的内联级元素。

您在Chrome的开发人员工具中看到的是匿名框所在元素的显示值，而不是内联框本身的显示值。它们实际上都是内嵌框，但是<p>＆amp; "In 1912"将是匿名的，而"sank on her maiden voyage"元素会创建一个非匿名的内联框，因为它是一个内联级元素。

Answer 2

em元素之前和之后的文本都包含在匿名内联框中。

如果您在此fiddle中看到，则所有文字都在一行内嵌显示。 em是一个内联元素，＆＃34; 1912年，＆＃34;包含在内联匿名框中，就像＃34;在她的处女航中沉没了。＆＃34;

调试器会说p元素是display: block。但调试器不显示匿名框，因此您不会看到em之前和之后的文本实际上是内联的。你可以看到它，好像它们是display: block它们将是元素的宽度，然后将em推到一个新的行上。