css中的DOM解释，为什么html，body背景颜色属性与body背景颜色属性的范围不同[重复]答案

【问题标题】：DOM explanation in css, why html, body background color attribute has different scope than body background color attribute [duplicate]css中的DOM解释，为什么html，body背景颜色属性与body背景颜色属性的范围不同[重复]
【发布时间】：2021-08-18 21:37:59
【问题描述】：

我希望这不是一个奇怪的问题，但假设我有以下 html 代码：

<body>
    <header>
        <h1>JavaScript Date function</h1>
    </header>
    <main>
        <p id="demo">This is a paragraph.</p>
    </main>
</body>

我也有这个 html 的以下 CSS 代码：

html , body{
  background-color: blue;
}
body{
  background-color: white;
}

我想知道为什么除了我的标题和段落之外的所有内容都是蓝色的，而只有标题是白色的？在这种情况下，由于 body 的最后一个背景颜色属性很重要，所以不是所有的 html 文件都是白色的吗？

这是显示您获得的图像的图像：

难道不都是一样的白色吗？

【问题讨论】：

您为<body> 设置了白色背景，为<html> 设置了蓝色背景。你在期待什么？
我没有给 html 设置背景色，我是给 html 设置的，body 是不是和 body 基本一样？我希望这不是一个愚蠢的问题
没有。 html, body 表示“html 和正文”。 html body 表示“html 内的任何body”，在您的情况下与body 相同。
哦，对不起... CSS 新手 :)
欢迎提问：')

标签： html css

【解决方案1】：

HTML 标记包含视口中的所有内容。 body 是一个容器，默认情况下它会包装它的所有内容并扩展为所需的大小，仅此而已。因此，由于您没有将白色应用于 HTML 标记，因此它是蓝色的，并且正文仅与您的标题和主体一样大。

【讨论】：

body 是一个容器，默认情况下它会包装它的所有内容并扩展为尽可能大， --> html 也在这样做同样，html 并没有像您所说的那样涵盖所有视口。在这里，我们只是面对从 html 到视口的背景传播的特殊行为（为 html 添加边框以查看发生了什么）
@TemaniAfif，知道了。很遗憾，只要我的答案被接受，我就无法删除它。