html中的body沒有高度設(shè)置背景色為什么可以全屏顯示

小編給大家分享一下html中的body沒有高度設(shè)置背景色為什么可以全屏顯示，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　--- 關(guān)于html和body的那些事

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

　　html, body { height: 100%; }

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

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

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

　　但！

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

　　body {

　　background: pink;

　　}

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

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

　　html {

　　background: orange;

　　}

　　body {

　　background: pink;

　　}

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

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

　　可以看出，body的高度被撐開，而body的背景色則是實實在在只給了body

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

　　瀏覽器會“吸收”html與body的背景色

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

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

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

　　疑問產(chǎn)生，開始實驗

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

　　body {

　　background: linear-gradient(pink, #fff);

　　}

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

　　于是開始設(shè)置

　　* {

　　margin: 0;

　　padding: 0;

　　}

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

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

　　html, body { height: 100%; }

看完了這篇文章，相信你對“html中的body沒有高度設(shè)置背景色為什么可以全屏顯示”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！