我知道将块元素放在内联元素中是错误的，但是下面呢？
想象一下这个有效的标记：
<div><p>This is a paragraph</p></div>
现在添加这个 CSS：
div {
display:inline;
}
这会造成内联元素包含块元素的情况（div变为内联，p默认为块）
页面元素是否仍然有效？
我们如何以及何时判断 HTML 是否有效 - 在应用 CSS 规则之前还是之后？
更新：我已经了解到，在 HTML5 中，将块级元素放在链接标签中是完全有效的，例如：
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
如果您想将一大块 HTML 用作链接，这实际上非常有用。
【问题讨论】：
来自CSS 2.1 Spec：
当内联框包含流内块级框时，内联框（及其在同一行框内的内联祖先）在块级框（以及任何连续或连续的块级兄弟姐妹）周围被打断。仅由可折叠的空格和/或流外元素分隔），将内联框分成两个框（即使任一侧为空），一个位于块级框的每一侧。断点前和断点后的行盒被封闭在匿名块盒中，块级盒成为这些匿名盒的兄弟。当这样的内联框受到相对定位的影响时，任何由此产生的平移也会影响内联框中包含的块级框。
如果满足以下规则，此模型将适用于以下示例：
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-only 和 CSS2-only 用户代理可以实现这个替代模型，并且仍然声称符合 CSS 2.1 的这一部分。这不适用于本规范发布后开发的 UA。
随心所欲。很明显，这种行为是在 CSS 中指定的，尽管它是否涵盖所有情况，还是在当今的浏览器中始终如一地实现尚不清楚。
【讨论】：
<div><a><span>Some text</span></a></div>。这里所有元素都有其正常的显示属性，但是我将::after pseudo-element 与<span> 一起使用，并带有一些文本内容，并将该伪元素设置为阻塞。该元素是span 的子元素，a 是div 的子元素。由于内联元素不支持宽度，所以宽度 100% 的块类型在这里如何工作？我觉得我在这个匿名盒子场景中，你能指出我正确的方向吗？谢谢
无论是否有效，元素结构都是错误的。不将块元素放在内联元素中的原因是浏览器可以以易于预测的方式呈现元素。
即使它没有破坏 HTML 或 CSS 的任何规则，它仍然会创建无法按预期呈现的元素。浏览器必须像 HTML 代码无效一样处理元素。
【讨论】：
span display="block"的a：jakpsatweb.cz/css/css-vertical-center-solution.html
HTML 和 CSS 仍然有效。理想情况下，您不必做这样的事情，但 CSS 的特定位实际上是一种方便（并且在语法上有效但在语义上无效）的方法，可以在不诉诸条件样式表或会使无效的黑客攻击的情况下获得 Internet Explorer 的双页边距错误你的 CSS。 (X)HTML 比 CSS 具有更多的语义价值，因此 CSS 在语义上的有效性不太重要。在我看来，这是可以接受的，因为它解决了烦人的浏览器问题，而不会使您的代码无效。
【讨论】：
HTML 独立于 CSS 进行验证，因此页面仍然有效。我相当确定 CSS 规范也没有提及它，但不要引用我的话。但是，我会非常小心地使用这样的技术，因为虽然它可能会在某些浏览器中按预期呈现，但您需要对它们全部进行测试——我看不出有多少保证。
【讨论】：
页面元素是否仍然有效？
HTML 意义上的“有效”，是的； HTML 对 CSS 一无所知。
但是，您在浏览器中获得的渲染效果在 CSS 规范中是“未定义的”，因此它可能看起来像任何东西。虽然您可以在针对特定浏览器的 CSS hack 中包含这样的规则（您知道该浏览器如何呈现这种情况），但通常不应将其提供给浏览器。
【讨论】：
display: block，这样它就可以填充单元格的宽度。
<a><span style="display:block"></span>[..more spans]</a> 以及：然后我可以将vertical-align: middle 放到span 块中吗？这样有效吗？
display: block 放在<a> 上？
vertical-align: middle 在跨度上不起作用的问题。 :\ 据我所知，只有表才能实现
我不知道这是否能验证任何规则，但我建议使用W3C HTML Validator 和W3C CSS Validator 来确定。希望这有帮助！
【讨论】：
如果您遵循某种逻辑并且最终以这样的方式实现它，那就没有错。工作的东西并不是因为它们很奇怪而“错误”。是的，这很不寻常，但它有帮助，这不是一个错误。这是故意的。 HTML 和 CSS 应该为您服务，而不是相反，所以永远不要听 cmets 告诉您不要仅仅因为它丑陋而这样做。
通常将解决方案称为“无效”并建议解决问题的方法很长。有时你可以重新思考你做了什么。但是，您所做的事情可能有很多原因，而他们却没有考虑到这些原因。
我确实经常在内联中使用块。它是有效的，而且它正在工作 - 在大多数情况下它不是必需的。所以呢。记得当 XHTML 告诉我们总是在属性周围加上引号（如果你不这样做，每个人都会对你大喊大叫！），现在 HTML5 允许在没有空格的情况下省略它们。单数标签后的最后一个斜线发生了什么？ “
”？快点。标准改变。但是浏览器也一直支持非标准的东西。 CENTER 已弃用；我们在 2013 年，它仍然有效。垂直居中的表？有时这是唯一的方法。 A 中的 DIV 使其按您的计划悬停？继续吧。
专注于重要的事情。
【讨论】：
我认为，(x)html 是有效的，css 是有效的。结果有效吗？是的，如果它在浏览器中按照您的需要查找。
【讨论】：
不，这不是一个错误的选择。我们可以根据需要使用。
【讨论】：