如果一个块元素包含另一个块元素，将其更改为与CSS内联是错误的吗？

卢晟

2023-03-14

问题内容：

我知道将block元素放入内联元素中是错误的，但是接下来呢？

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

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

现在添加此CSS：

div {
   display:inline;
}

这会导致内联元素包含block元素的情况（默认情况下div变为内联，而p为block）

页面元素仍然有效吗？

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

更新： 从那以后，我了解到在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中指定的，尽管目前尚不清楚它是否涵盖所有情况，还是在当今的浏览器中一致地实现。

如果一个块元素包含另一个块元素，将其更改为与CSS内联是错误的吗？

相关阅读

相关文章

相关问答

相关工具

相关文档