下载掌阅APP，畅读海量书库
立即打开
先从很多人感到困惑的现象说起。
新建一个空白页面，我们不设置任何额外的CSS代码，此时，我们使用如下所示的JavaScript代码去获取<body>元素的高度，返回的结果会是0，运行结果如图2-18所示。
图2-18 <body>元素的默认高度是0
但是，我们给<body>元素设置背景色，例如纯黑色背景：
此时，整个页面的背景色都变成了黑色，如图2-19所示。
图2-19 <body>元素的背景色是黑色
这就很奇怪了，明明<body>元素的高度是0，其背景色为何会铺满整个浏览器窗口呢？
还有更奇怪的，此时，我们给<html>元素设置任意的背景，例如线性渐变（代码参见下方），则原本<body>元素设置的黑色背景奇迹般地消失了，并且渐变背景的平铺高度只有8px，是水平条纹，效果如图2-20所示。
图2-20 给<html>元素设置渐变后的水平条纹背景
有两个问题，其一，原本<body>元素的黑色背景去哪里了？其二，<html>元素的渐变背景为何是8px高度平铺？
不卖关子了，直接说结论；
（1）如果<html>元素未设置背景，则<body>元素的背景会自动按照<html>元素的背景规则渲染，否则按照类似<div>这样的普通元素的背景规则渲染。
（2）<html>元素的背景高度至少为一屏。
下面按照上述结论再具体解释一下。
· 当仅给<body>元素设置背景色的时候，其渲染效果和<html>元素设置背景色一致，由于<html>元素的背景高度至少为一屏，因此背景色是铺满整个屏幕的，哪怕<body>元素的实际高度是0。
· 当<html>元素设置了渐变背景后，<body>元素的背景色按照普通的HTML元素的背景规则渲染，由于高度是0，因此黑色背景消失不可见。
· <body>元素会有margin：8px的默认样式，在CSS中有个名为“margin合并”的现象，其中的一个规则就是，如果块级元素没有任何内容，同时没有设置padding或border之类的样式，那么上下margin会合并为较大的那个值。
因此，默认状态下，<html>元素的高度是8px，所以渐变背景的屏幕高度就是8px，而<html>元素的背景至少有一屏高度，因此，可以看到8px的水平条纹铺满整个屏幕。
明白了上面的解释，自然也就可以明白下面这些现象了。
· 如果<body>元素直接设置线性渐变背景，则最终的效果也是8px高的水平条纹，代码如下所示，最终渲染效果如图2-21所示，是黑色到天蓝色的8px高的水平条纹。
图2-21 <body>元素设置渐变后的水平条纹效果
· 如果给<html>设置一个具体的高度值，例如100px，则水平条纹的平铺高度也会是100px，效果如图2-22所示。
图2-22 <html>元素的高度影响<body>元素设置的渐变背景的平铺高度
以上描述的现象都可以通过在浏览器中输入地址https://www.htmlapi.cn/2/3-1.html或扫码访问来体验。
失效的overflow：hidden
除背景之外，<body>元素的overflow属性也有类似的“冒泡”现象。举个例子，如下所示的HTML和CSS代码：
按照我们对现有知识的理解，<body>元素的高度只有50px，同时设置了尺寸溢出隐藏，那么里面的<div>子元素的150px高度应该只有50px的高度是可见的，但实际上overflow：hidden失效了，<div>元素并没有被隐藏。
为了方便预览，我们不妨给<body>加个黑色边框，此时的效果就会如图2-23所示，可以看到棕色的背景色块完全暴露在眼前，高度溢出的部分并没有被隐藏。
图2-23 <body>元素的overflow：hidden失效的效果
很神奇的是，如果给<html>元素设置overflow：hidden，则溢出的<div>被隐藏了，哪怕这个<html>元素的高度远远大于<div>的高度也同样如此。
此时的<body>元素的overflow：hidden生效了，效果如图2-24所示。
图2-24 <html>元素的overflow：hidden让<body>元素的overflow：hidden生效的效果
对于上述现象，可以通过在浏览器中输入地址https://www.htmlapi.cn/2/3-2.html或扫码访问来体验。
为何会这样？
其实和背景色的渲染规则有些类似，即：
· 如果<html>元素没有设置overflow属性，那么<body>元素设置的overflow属性值可以看成设置在<html>元素上；
· <html>元素的overflow属性生效高度至少为一屏。
所以，在本例中：
· 就算给<html>元素设置overflow：scroll，<body>元素的overflow：hidden也会生效。
· 如果给<div>元素设置足够高的高度，例如：
那么可以看到<div>元素超出一屏高度的区域被隐藏了，原因就是此时溢出隐藏的容器元素是<html>，而<html>元素的overflow属性的最小计算高度是一屏。
也就是说，虽然看起来<body>和<html>是两个独立的元素，但实际上，彼此之间有很多替代渲染规则，了解这种规则有助于更好地理解Web网页在窗体层面的一些渲染现象。