我对此内容sitepoint link
有疑问以下标记呈现为块+内联+块
<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标准中提到了内联匿名框?
答案 0 :(得分:5)
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"
元素会创建一个非匿名的内联框,因为它是一个内联级元素。
答案 1 :(得分:3)
em
元素之前和之后的文本都包含在匿名内联框中。
如果您在此fiddle中看到,则所有文字都在一行内嵌显示。 em是一个内联元素,&#34; 1912年,&#34;包含在内联匿名框中,就像#34;在她的处女航中沉没了。&#34;
调试器会说p
元素是display: block
。但调试器不显示匿名框,因此您不会看到em
之前和之后的文本实际上是内联的。你可以看到它,好像它们是display: block
它们将是元素的宽度,然后将em
推到一个新的行上。
此处的规范中提到了匿名内联框:http://www.w3.org/TR/CSS2/visuren.html#anonymous