html - 当显示 :inline breaks a paragraph? 的 div 时发生了什么

Question

我正在为 HTML 和 CSS 中的所有内容编写示例代码。我遇到了display:inline并写了一些片段来解释自然 block 级元素 ( <div> ) 如何充当内联元素。在最近的研究中，我发现现代浏览器会自动转义 <p>。遇到 <div> 时标记在 <p> 内.

我的 JSFiddle 示例你可以查看 here在行动中展示了这一点。如果您检查 <p>元素，你会发现 <div>不再在段落内。我想知道为什么，因为 <div>应被视为内联元素。

谢谢!

Answer 1

HTML5 允许 anchor 元素包裹 block 级元素，但所有其他内联元素不得包含 block 级元素。段落元素是一个奇怪的元素，因为它实际上是 block 级元素，但它不能包含更多 block 级元素(来源:http://www.w3.org/TR/html4/struct/text.html#h-9.3.1)。

请记住，如果您设置 display: inline;，即使 block 级元素表现得好像是内联元素，它仍然是 block 级元素。