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

Question

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

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

我发现边框显示为 700 像素宽，如我所料，但背景色占据了整个浏览器视口(viewport)。为什么？

Answer 1

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

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

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