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

Question

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

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

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

Answer 1

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

根元素的背景成为画布的背景并覆盖整个画布,锚定(对于"背景位置")与在仅为根元素本身绘制时相同的点.根元素不会再次绘制此背景.

的body元素是根元素,并且因此,所要求的CSS规则它失去它的背景风格和背景样式被施加到含有画布(在浏览器中的网页区域),为此整个屏幕是蓝色的.其他属性保留元素(例如border).

Answer 2

来自CSS:Eric Meyer的权威指南

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

因此,当您background-color: blue;向body元素添加声明时,此值将传播到html元素(也是根元素).添加此声明以便自己查看.

html {
    background-color: grey;
}