d在做任務(wù)14實(shí)戰(zhàn)的時候卵史，發(fā)現(xiàn)對header部分的背景圖片使用height：100%并沒有生效铝条，其實(shí)是跟父元素有關(guān)邓馒。
先看代碼：
#header{
width: 100%;
height: 100%;
background: url(../img/01_bg.jpg) 0 0 no-repeat;
background-size: cover;
}
上面的CSS代碼所產(chǎn)生的效果并不是我所想的那樣：
高度沒有撐開
需要在父元素添加一個高度自適應(yīng)：
html,body{
height: 100%;
}
#header{
width: 100%;
height: 100%;
background: url(../img/01_bg.jpg) 0 0 no-repeat;
background-size: cover;
}
圖片顯示完整
在設(shè)置了html和body的height：100%后碴巾，header的高度就能自適應(yīng)了墙杯。
記得在任務(wù)12的時候也有一個width：100%的設(shè)置配并，這就有一個結(jié)論，一個對象的寬高是否能使用百分比顯示高镐，取決于對象父元素的設(shè)置溉旋。在任務(wù)14中，#header是屬于body的子元素嫉髓，而在默認(rèn)狀態(tài)下观腊，瀏覽器是不會給body一個高度屬性的，所以我們在設(shè)置#header的height：100%并沒有達(dá)到我們想要的結(jié)果算行，但是在給body設(shè)置了100%后梧油，#header的高度設(shè)置就有了效果，這就是瀏覽器解析規(guī)則引發(fā)的高度適應(yīng)的問題州邢。
代碼中除了給出body的height：100%外儡陨，對html也應(yīng)用了同樣的設(shè)置，這樣是為了解決IE瀏覽器和Firefox的兼容問題量淌。
IE中的html對象是默認(rèn)的100%高度骗村，但是body不是，而在firefox中的html標(biāo)簽不是默認(rèn)100%的高度呀枢，因此body和html都設(shè)置height：100%胚股，保證我們的代碼在這兩款瀏覽器中都能正常工作。
