新建一个html5文档,我们知道在chrome浏览器默认情况下html的高度为8px,body的高度为0而margin上下左右都为8px,那么如果我们给html和body元素设置背景颜色,浏览器会怎样渲染呢?是否只是给这8px高度范围的区域填充背景色呢?
先看一下只给html设置背景色的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: rgba(255,0,0,1);
}
</style>
</head>
<body>
</body>
</html>
浏览器渲染的结果:
浏览器并没有只给html元素的高度范围填充背景色,而是给 整个窗口填充了背景色。
那么我们再来看看单独给body元素设置背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgba(0,255,0,1);
}
</style>
</head>
<body>
</body>
</html>
浏览器的渲染结果:
如同上面的html元素一样,浏览器也是给 整个窗口填充了背景色。
如果同时给html和body元素设置背景色呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: rgba(0,0,0,0.5);
}
body{
background-color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
</body>
</html>
我们给背景色设置了半透明,看下是否出现区域重叠,浏览器渲染结果如下:
我们看到body的背景色被html的背景色给遮挡住了。