久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

03
2017/06

body高度為0為什么背景色能充滿整個瀏覽器?

發(fā)布時間:2017-06-03 16:40:33
發(fā)布者:jiangbing
瀏覽量:
0

給body元素設(shè)置背景色,但是body沒有內(nèi)容,高度沒有填充整個瀏覽器情況下,瀏覽器整個窗口都是body設(shè)置的背景色,這個是什么導(dǎo)致的?

一般情況下,我們css控制的最高結(jié)點(diǎn)就是body,例如設(shè)置:body{background:#069;}則瀏覽器界面就是完全的#068的背景色。 這里看上去是body標(biāo)簽下的背景色起作用了,我倒不這么認(rèn)為??聪旅娴囊欢蝐ss代碼:

body{background:#069; margin:100px; border:30px solid #093; height: 100px;}

意思很簡明:外邊距100像素,邊框30像素,背景色#069,按照對一般標(biāo)簽的理解,100像素的外邊距應(yīng)該不含有背景色的,然而顯示的結(jié)果是:

blob.png

然而一旦設(shè)置了html的background背景色之后,body的背景色將失效。例如下面的簡短代碼:

html{background:#999;}
body{background:#069; margin:100px; border:30px solid #093;height:100px;}

跟上面的相比,只是添加了html的背景色,結(jié)果:

blob.png

結(jié)果是body標(biāo)簽滿屏的背景色不見了。我覺得這和瀏覽器本身的機(jī)制有關(guān),我們可以認(rèn)為瀏覽器是一個會“吸收”顏色的東西,當(dāng)我們給body設(shè)置顏色時,雖然body沒有高,但是瀏覽器底板需要顏色,它看到了body的顏色 ,就想要拿來變成自己的,然后它把自己搞成了body設(shè)置的那個顏色,當(dāng)我們給html也設(shè)置了一個顏色后,瀏覽器發(fā)現(xiàn),html好像離我更近啊,于是就就近渲染了html標(biāo)簽的背景色給自己. 這樣一來,我們看到的瀏覽器窗口又變成html設(shè)置的顏色了。

因此,我們所看到的那個背景色,既不屬于body標(biāo)簽,也不屬于html,它屬于更底層的那個底板,是瀏覽器窗口本身吸收了body和html標(biāo)簽中更靠近自己的那個后,渲染出來的瀏覽器窗口底板的顏色。


關(guān)鍵詞:
返回列表