如果块元素包含另一个块元素,将块元素更改为内联CSS是错误的吗?

我知道将一个块元素放入一个内联元素是错误的,但下面的内容呢?

想象一下这个有效的标记:

<div><p>This is a paragraph</p></div>

现在添加这个CSS:

div {
   display:inline;
}

这创建了一个内联元素包含块元素的情况(div变为内联,并且p默认为block)

页面元素是否仍然有效?

我们如何以及何时判断HTML是否有效 - 在应用CSS规则之前还是之后?

更新:我从那里了解到,在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中指定的,尽管它是覆盖所有情况还是在当今的浏览器中一致地实现尚不清楚。


无论是否有效,元素结构都是错误的。 之所以不将块元素放在内联元素中,是因为浏览器能够以易于预测的方式呈现元素。

即使它没有违反任何HTML或CSS的规则,它仍会创建无法按预期呈现的元素。 浏览器必须处理这些元素,就像HTML代码无效一样。


HTML和CSS将仍然有效。 理想情况下,你不需要做这样的事情,但是CSS的这一特定位置实际上是一个方便(在语法上有效但在语义上无效)的方法,用于获取Internet Explorer的双重保证金错误,而不诉诸条件样式表或黑客将无效你的CSS。 (X)HTML比CSS有更多的语义值,所以CSS在语义上是有效的并不重要。 在我看来,这是可以接受的,因为它解决了一个恼人的浏览器问题,而不会使代码失效。

链接地址: http://www.djcxy.com/p/88443.html

上一篇: Is it wrong to change a block element to inline with CSS if it contains another block element?

下一篇: What is the issue with this simple HTML, CSS layout?