我們有時會在CSS里寫height: 100%，發(fā)現(xiàn)并無效果人柿，如下：
<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的高度并未按照我們預(yù)想那樣撐滿全屏高度
block類的父級（包含塊）是body，body在未設(shè)置值的時昔搂，height值為auto拍嵌，body的實際計算高度為內(nèi)容撐開的高度，即為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愤估，即在瀏覽器上無渲染高度
瀏覽器的渲染規(guī)則可理解記憶為：深度優(yōu)先遍歷計算
子元素的相對單位的計算值都是基于父/祖先元素對應(yīng)的屬性值帮辟，auto是基于內(nèi)容區(qū)域撐開計算所得。
瀏覽器渲染HTML文檔流玩焰，背景色默認(rèn)為白色由驹，如果文檔中的html、body標(biāo)簽設(shè)置了背景色昔园，這兩個標(biāo)簽的背景色實際設(shè)置的是瀏覽器視口的背景色蔓榄。
