我知道将块元素放在内联元素中是错误的,但是下面的呢?
想象一下这个有效的标记:
<div><p>This is a paragraph</p></div>
现在添加这个CSS:
div {
display:inline;
}
这会造成内联元素包含块元素的情况(div 变为内联,p 默认为块)
页面元素仍然有效吗?
在应用 CSS 规则之前或之后,我们如何以及何时判断 HTML 是否有效?
UPDATE:从那以后我了解到,在 HTML5 中,将块级元素放入链接标记内是完全有效的,例如:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
如果您希望将一大块 HTML 作为链接,这实际上非常有用。
来自CSS 2.1 规范:
当内联框包含流内块级框时,内联框(及其在同一行框中的内联祖先)将在块级框(以及任何连续或仅由可折叠的空白和/或外流元素),将内联框分成两个框(即使任一侧为空),块级框的每一侧各一个。分隔符之前和分隔符之后的行框包含在匿名块框内,并且块级框成为这些匿名框的同级框。当这样的行内框受到相对定位的影响时,任何产生的平移也会影响行内框中包含的块级框。
如果满足以下规则,则该模型将适用于以下示例:
p { display: inline }
span { display: block }
与此 HTML 文档一起使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
P 元素包含一个匿名文本块 (C1),后跟一个块级元素,然后是另一个匿名文本块 (C2)。生成的框将是代表 BODY 的块框,包含 C1 周围的匿名块框、SPAN 块框和 C2 周围的另一个匿名块框。
匿名框的属性继承自封闭的非匿名框(例如,在标题“匿名块框”下面的示例中,即 DIV 的框)。非继承属性有其初始值。例如,匿名框的字体继承自DIV,但边距将为0。
在导致生成匿名块框的元素上设置的属性仍然适用于该元素的框和内容。例如,如果在上例中为 P 元素设置了边框,则边框将围绕 C1(在行尾打开)和 C2(在行首打开)绘制。
一些用户代理以其他方式在包含块的内联上实现边框,例如,通过将此类嵌套块包装在“匿名行框”内,从而在此类框周围绘制内联边框。由于 CSS1 和 CSS2 没有定义此行为,因此仅 CSS1 和仅 CSS2 用户代理可以实现此替代模型,并且仍然声明符合 CSS 2.1 的这一部分。这不适用于本规范发布后开发的UA。
随你所欲。显然,该行为是在 CSS 中指定的,尽管尚不清楚它是否涵盖所有情况,或者是否在当今的浏览器中一致实现。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)