Question

当您设置body元素的背景样式时，为什么样式会影响整个屏幕而不仅仅影响body元素本身？假设我创建了以下规则：

body {width: 700px; border: 1px dotted red; background-color: blue;}

我发现边框显示为700px宽，正如我所料，但背景颜色占据了整个浏览器视口。为什么呢？

Answer 1

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于“背景位置”）与在仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。

body元素是根元素，因此，根据CSS规则的要求，它会丢失其背景样式，并且背景样式将应用于包含的画布（浏览器中的网页区域），因此整个屏幕都是蓝色的。其他属性与元素保持一致（例如border）。

Answer 2

来自CSS：Eric Meyer的权威指南

在CSS值中永远不会传播向上;也就是说，一个元素永远不会将值传递给它的祖先。向上是一个例外 HTML中的传播规则：背景应用于body元素的样式可以传递给html元素，这是文档的根元素因此定义了它的画布。

因此，当您向background-color: blue;元素添加body声明时，此值将传播到html元素（也是根元素）。添加此声明以便亲自查看。

html {
    background-color: grey;
}

Answer 3

当您设置<body>的背景颜色时，浏览器会将其解释为整个窗口的背景颜色，即使您已强制使用CSS使<body>更小。否则，<body>标记的外部会是什么颜色？

Answer 4

CSS的神秘之处，我想。

更好的想法是将您的内容放在<div>元素和样式中，而不是尝试设置整个<body>标记的样式。

Answer 5

这就是使用容器的好主意。如：

<body>
    <div id="container">

    </div>
</body>

Answer 6

您无法在<body>元素本身上设置宽度，这就是为什么整个屏幕显示为蓝色而不是700px区域的原因。

Answer 7

必须设置整个背景，因为您无法定义页面中“不”正文的部分。