为什么设置body元素的背景样式会影响整个屏幕？

Question

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

​

body {
  width: 700px;
  height:200px;
  border: 5px dotted red;
  background-color: blue;
}

​

我发现边框像我预期的那样显示为700px宽，但背景颜色占据了整个浏览器视口。为什么？

Answer 1

引用自http://www.w3.org/TR/CSS21/colors.html

根元素的背景成为画布的背景，并覆盖整个画布，锚定(对于' background -position')在相同的点，如果它只为根元素本身绘制。根元素不会再次绘制此背景。

body元素是根元素，因此，根据CSS规则的要求，它失去了背景样式，并且背景样式被应用于包含的画布(浏览器中的网页区域)，因此整个屏幕是蓝色的。其他属性保留在元素中(例如border)。

Answer 2

来自CSS: Eric Meyer的权威指南

CSS值中的

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

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

html {
    background-color: grey;
}

Answer 3

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