html 元素的背景如何占据整个视口？

Question

甚至没有为 html 元素提供任何高度，background 如何覆盖整个视口。当我检查 html 元素的计算高度时，它只是 8px，这是因为 body 从用户代理样式表中获取的 margin。

html {
  background: hotpink;
}

如果在 body 的计算高度为 0px 时给 body: {background: hotpink} 背景，甚至会发生这种情况。

有了body，我知道其实不是body的背景可见，而是反向继承了body的背景的html。所以，这有点类似于在 html.

上设置它

但我的疑问是当它没有内容或没有指定任何高度时，它如何占据整个视口？

似乎只有 background 属性才会出现这种行为，因为添加 border 可以清楚地表明 html 的 height仅 8px。

html {
  background: hotpink;
  border: 2px dotted rebeccapurple;
}

Answer 1

~Per W3

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.

在 CSS 中，值从不向上传播，这意味着元素永远不会将值传递给其祖先。但是，HTML中的向上传播规则有例外：

background styles that are applied to the body element can be passed to the HTML element, which is the document's root element, therefore, defines the canvas.

~The Definitive Guide

因此在您的示例中，body 元素是 root-element，根据浏览器的 CSS 规则的要求，它失去了初始背景样式，新的背景样式适用于包含[=36=]，因此整个画面都是粉红色的。

html 元素的背景如何占据整个视口？

How does the background to an html element occupy the entire viewport?

html

css

semantics