還記得我們開(kāi)發(fā)全屏頁(yè)面或者是移動(dòng)端頁(yè)面時(shí)經(jīng)常會(huì)設(shè)置一句話

是不是只知道用？卻不知道怎么回事？

原因是，當(dāng)沒(méi)有內(nèi)容撐開(kāi)高度時(shí)，html和body的默認(rèn)高度是0，如果內(nèi)容想要按照比例或是撐滿全屏?xí)r，就沒(méi)辦法正常使用百分比。

而如果只設(shè)置body { height: 100%; }，這時(shí)body以html的高度為基準(zhǔn)，但html默認(rèn)高度也是0，所以需要設(shè)置html與body高度同與瀏覽器等高

但是，當(dāng)我們沒(méi)有設(shè)置任何高度的情況下，給body設(shè)置背景色，顏色竟然是可以布滿瀏覽器的，然而可以看到控制臺(tái)中，body實(shí)實(shí)在在是沒(méi)有高度的，這究竟是為什么呢？

事實(shí)上，當(dāng)我們單獨(dú)給body設(shè)置背景顏色時(shí)，并不是body標(biāo)簽被賦予了背景色，而是【 瀏覽器畫布 】賦上了顏色，可以理解為，body的背景色被瀏瀏覽器”吃掉“

那如果我們同時(shí)給html與body設(shè)置背景色，會(huì)發(fā)生什么樣的結(jié)果呢

可以看到，我們?cè)O(shè)置的body背景色竟然“失效了”，瀏覽器被賦予了html的背景色

而在我看來(lái)，實(shí)際是我們?cè)O(shè)置的body背景色[生效了]，但因body默認(rèn)高度為0，所以在頁(yè)面中并沒(méi)有粉色區(qū)塊顯示，那我們嘗試在body中添加一些內(nèi)容

可以看出，body的高度被撐開(kāi)，而body的背景色則是實(shí)實(shí)在在只給了body

所以我們可以得出一個(gè)結(jié)論

瀏覽器會(huì)“吸收”html與body的背景色

當(dāng)只設(shè)置了body背景色時(shí)，瀏覽器發(fā)現(xiàn)了，于是把這個(gè)背景色“占為己有”

而如果html設(shè)置了背景色，瀏覽器則會(huì)認(rèn)為html離我更近，所以會(huì)“拿走”html的背景色當(dāng)成自己的顏色

當(dāng)然，到現(xiàn)在為止，我們實(shí)驗(yàn)的都是純色背景，那如果我們?cè)O(shè)置成漸變色，還是相同的結(jié)果嗎？

疑問(wèn)產(chǎn)生，開(kāi)始實(shí)驗(yàn)

首先，只設(shè)置body的背景為線性漸變粉色pink到白色#fff，預(yù)想結(jié)果應(yīng)該是和背景一樣，直接瀏覽器從上往下的漸變

嗯？這怎么和預(yù)想不一樣，再放大頁(yè)面看一下漸變，就可以發(fā)現(xiàn)每個(gè)漸變的高度和html的高度是一致的，而html的高度則是body的默認(rèn)margin撐開(kāi)

于是開(kāi)始設(shè)置

同樣，如果漸變給html設(shè)置的，也不會(huì)作用到瀏覽器上

說(shuō)明瀏覽器并不會(huì)把漸變色據(jù)為己有，那如果想要設(shè)置全屏漸變，就需要用到我們文章開(kāi)頭說(shuō)到的。

這么詳細(xì)大家應(yīng)該知道為什么要這么設(shè)計(jì)了吧，最后歡迎大家添加我們的web前端技術(shù)分享交流qq群：791201477   加群找群管理免費(fèi)領(lǐng)取更多web前端教程視頻和項(xiàng)目代碼，快點(diǎn)等你來(lái)哦~~~~~