HTML5和CSS3规范如何确定div元素的显示属性？

Question

"The web技术（尤其是前端技术）发展得如此之快，以至于我每年都必须重新学习它，这次似乎是一个非常简单的问题：为什么

具有display:block属性？传统上，我们直接在HTML 4中定义块和内联级元素，但HTML5用流内容和短语内容等概念取代了它，根据MDN的说法，这将这一呈现特性留给CSS。这符合关注点分离原则，因此这一做法非常合理。"

但是CSS3在

上有什么要说的吗？显示模块规范主要讨论框布局，其中display的默认/初始值为inline。它偶尔会参考CSS2的流式布局。不幸的是，CSS2（包括CSS2.2）似乎直接使用术语“块级元素”，好像它们已经在其他地方定义过了。

此外，还有类似块格式化上下文、块盒子等概念。但我觉得它们与确定

的display值没有直接关系。

归根结底，我只是不知道最新HTML/CSS规范中如何渲染

。

- wlnirvana

---

这不是规范，而是浏览器默认样式（用户代理）。 - Temani Afif

请勿重复提交相同的问题。如果您需要更新您的问题，请编辑该问题并添加更多详细信息。如果您需要回答您的问题，请使用“回答”按钮。谢谢！ - Temani Afif

@TemaniAfif - 这并不是实际情况。HTML5规范的渲染部分15.3.3流内容指出，div元素被期望为display:block。 - Alohci

@Alohci 嗯，我们还在学习新的东西 :) 我没想到 HTML 规范中会有与 CSS 相关的内容。我想值得添加一个答案。 - Temani Afif

@TemaniAfif 别忘了将赏金授予答案！4小时后，这50个声望点将会丢失！ - TheEagle

@程序员，他们不会这样做的，我仍然有4小时后的24小时宽限期;) - Temani Afif

Answer 1

元素的默认样式在 HTML5 规范的 Rendering 部分中进行了描述。

浏览器不一定需要遵循那里描述的规则才能符合标准，但在大多数情况下，它们确实会这样做。对于像 div 这样已经被广泛使用的元素，不遵循这些规则是没有意义的。

div 元素属于一个被设置为 display:block 的 流内容 集合。

address, blockquote, center, dialog, div, figure, figcaption, footer, form, 
header, hr, legend, listing, main, p, plaintext, pre, xmp {
    display: block;
}

需要注意的是，其中几个元素已经过时 - center、listing、plaintext 和 xmp。它们不应该被作者使用，但仍定义了它们的渲染方式，以便旧的网页文档仍然可以正确呈现。

- Alohci