如果块元素包含另一个块元素,那么将块元素更改为与CSS内联是不正确的?

Mat*_*lor 43 html css xhtml w3c

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

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

<div><p>This is a paragraph</p></div>
Run Code Online (Sandbox Code Playgroud)

现在添加这个CSS:

div {
   display:inline;
}
Run Code Online (Sandbox Code Playgroud)

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

页面元素是否仍然有效?

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

更新:我已经了解到在HTML5中将块级元素放在链接标记内是完全有效的,例如:

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>
Run Code Online (Sandbox Code Playgroud)

如果您希望将大块HTML作为链接,这实际上非常有用.

Alo*_*hci 25

CSS 2.1规范:

当内联框包含一个流内块级别框时,内嵌框(及其同一行框内的内联祖先)在块级框(以及任何连续或仅由其分隔的块级兄弟)中被打破.可折叠的空白和/或流出元素),将内联框分成两个框(即使任一边是空的),块级框的每一边一个.中断前和中断后的行框都包含在匿名块框中,块级框成为这些匿名框的兄弟.当这样的内联框受到相对定位的影响时,任何结果转换也会影响内联框中包含的块级框.

如果以下规则,此模型将应用于以下示例:

p    { display: inline }
span { display: block }
Run Code Online (Sandbox Code Playgroud)

与此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>
Run Code Online (Sandbox Code Playgroud)

P元素包含匿名文本的块(C1),后跟块级元素,后跟另一个匿名文本块(C2).结果框将是一个表示BODY的块框,包含C1周围的匿名块框,SPAN块框和C2周围的另一个匿名块框.

匿名框的属性继承自封闭的非匿名框(例如,在标题"匿名框框"的子部分下面的示例中,DIV的那个框).非继承属性具有初始值.例如,匿名框的字体继承自DIV,但边距将为0.

在导致生成匿名块框的元素上设置的属性仍适用于该元素的框和内容.例如,如果在上面的示例中已在P元素上设置了边框,则边框将围绕C1(在行的末尾打开)和C2(在行的开头处打开)绘制.

一些用户代理已经以其他方式在包含块的内联上实现了边界,例如,通过将这样的嵌套块包装在"匿名线框"内,从而在这些框周围绘制内联边框.由于CSS1和CSS2没有定义此行为,因此仅CSS1和CSS2用户代理可以实现此替代模型,并且仍声称符合CSS 2.1的这一部分.这不适用于此规范发布后开发的UA.

按照你的意愿做.显然,行为是在CSS中指定的,尽管它是否涵盖所有情况,或者是否在当今的浏览器中一致地实现,目前还不清楚.

  • @George - 您经常会看到诸如“块元素 [在正常流中] 占据其父元素宽度的 100%”之类的语句。这实际上并不正确。如果您查看部分 [10.3.3 正常流程中的块级非替换元素](https://www.w3.org/TR/CSS22/visudet.html#blockwidth),您会发现它确实是“块元素 [在正常流程中] 占据其 ** 包含块 ** 宽度的 100%”。像 span 这样的内联元素不是块容器。相反,最近的祖先元素是块容器(即您的 div 元素)用于建立 100% 宽度。 (2认同)

Guf*_*ffa 15

无论它是否有效,元素结构都是错误的.你不要把块元素行内元素里面的原因是使浏览器可以呈现在容易预测方式的元素.

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

  • 那么当你需要一个表中的整行可点击时,你会怎么做? (3认同)
  • @Guffa我贬低了,因为尽管规范声明它是有效的,我只是断言某些东西是"错误的"似乎很奇怪,而且我无法从你的答案中看出 - 如果有的话 - 浏览器的正确行为会不清楚.也许有一些我缺少的东西,但是在我读完之后我并不清楚*"它创造出无法按预期呈现的元素"的说法是正确的,甚至是这意味着什么. (3认同)
  • @mgPePe:有几种选择.您可以在行中的每个单元格中放置一个链接,您可以使用Javascript来捕获该行上的click事件,也可以使用与表格不同的内容. (2认同)

Vir*_*dia 5

HTML和CSS都仍然有效.理想情况下,您不必执行类似这样的操作,但是CSS的特定位置实际上是一种方便的(在语法上有效但不是语义上有效)的方式来获取Internet Explorer的双边距错误而不诉诸条件样式表或黑客将无效你的CSS.(X)HTML具有比CSS更多的语义值,因此CSS在语义上有效并不重要.在我看来,它是可以接受的,因为它解决了一个恼人的浏览器问题而不会使代码无效.