我们先看一个现象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: aqua;
        }
    </style>
</head>

<body>


</body>

</html>


这里有一个非常有意思的现象，body 的高度为 0，但是这个背景颜色却占满了整个屏幕。

前面我们提到，背景默认情况下填充的是 border-box。


哪怕我给 body 元素设置了宽高，其背景颜色的生效范围也有问题。

这里解释一下这个问题，首先，了解什么叫画布，整个网页其实是一张画布，画布有以下特点

1. 画布的最小宽度为视口宽度
2. 画布的最小高度为视口高度

整个网页就是一个画布，如果网页宽高超出了视口，就会出现滚动条

HTML 元素的背景属性，和其他元素不太一样，是覆盖画布的。而对于 body 元素，情况比较复杂，如果 html 元素有背景，那么 body 元素和其他元素一样，背景覆盖边框盒，也不会出现一系列奇奇怪怪的问题。但如果 html 元素没有设置背景，body 元素的背景就会覆盖整个画布。

很显然，在上面那种情况下，由于没有给 html 元素设置背景，所以 body 元素的背景就会覆盖画布，也就是整个网页。

以上规则对于背景颜色和背景图片均适用。

关于背景图片，有一些需要注意的点:

1. 在以上非正常情况下，背景图的宽度（background-size）百分比相对于视口，而非画布。
2. 在以上非正常情况下，背景图的高度（background-size）百分比相对于 HTML 元素，既不是视口，也不是画布。
3. 背景位置（background-position）的相对单位, 横向相对于视口，纵向相对于 HTML 元素。

以上问题比较罕见，可能开发好多年都不会发现这个问题，规则也比较麻烦，一般我们不需要考虑，只当了解即可。