我们有时会在CSS里写height: 100%，发现并无效果，如下：
<div class="block"></div>
* {
padding: 0;
margin: 0;
border: 0;
}
body {
background-color: green;
/* height: 100%; */
border: 5px solid greenyellow;
}
.block {
width: 100%;
height: 100%;
background-color: red;
}
block类div的高度并未按照我们预想那样撑满全屏高度
block类的父级（包含块）是body，body在未设置值的时，height值为auto，body的实际计算高度为内容撑开的高度，即为0（可以将上述代码的border样式取消注释，可看到body的高度）
那么子元素block类的高度即等同于0
body {
background-color: azure;
height: auto;
}
.block {
width: 100%;
height: 0 * 100%; // 0
background-color: red;
}
所以此时block类所在的div盒子的高度无效，height为0，即在浏览器上无渲染高度
浏览器的渲染规则可理解记忆为：深度优先遍历计算
子元素的相对单位的计算值都是基于父/祖先元素对应的属性值，auto是基于内容区域撑开计算所得。
浏览器渲染HTML文档流，背景色默认为白色，如果文档中的html、body标签设置了背景色，这两个标签的背景色实际设置的是浏览器视口的背景色。
