给整个页面的身体提供背景颜色.为什么?

Mr_*_*ect 6 html css

body {
  background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div>Hello World!</div>
</body>
Run Code Online (Sandbox Code Playgroud)

因此background-color: red;适用于整页高度,但是当我检查页面时,身体的高度仅限于div包含Hello World!.

有人请解释一下为什么会这样.

Pao*_*gia 8

主要的原因是因为HTMLbackground-colorBODY,因为:

根元素的背景成为画布的背景并覆盖整个画布[...]

如此以来,默认background-colorHTMLtransparent它会从一个BODY.但是,对于元素HTMLBODY元素应用颜色,您将看到BODY背景不再覆盖整个页面.

html {
  background-color: blue;
}

body {
  background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
<html>

<body>
  <div>Hello World!</div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

根元素的背景成为画布的背景并覆盖整个画布,锚定(for background-position)与仅为根元素本身绘制时相同的点.根元素不会再次绘制此背景.

但是,对于HTML文档,我们建议作者指定BODY元素的背景而不是HTML元素.对于其根元素是HTML"HTML"元素的文档或具有transparentfor background-colornonefor的计算值的XHTML"html"元素background-image,用户代理必须使用该元素的第一个HTML"BODY"元素的背景属性的计算值或在为画布绘制背景时,XHTML"body"元素子元素,并且不得为该子元素绘制背景.如果仅为根元素绘制它们,那么这些背景也必须固定在同一点上.

W3 - 14颜色和背景.