height:100%无效

我们有时会在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标签设置了背景色，这两个标签的背景色实际设置的是浏览器视口的背景色。