對html與body的一些研究與理解

為什麼要寫這篇文章？

在做專案的時候，發現有以下問題不理解：

（1）在從css檔案中修改body的背景色沒起效果

（2）有時候設定某個div高度100%的時候也沒效果

關於html與body的一些表現：

1.關於背景色：

如果你沒有設定html標籤的背景色，只是設定了body的背景色，此時標籤未被啟用，body擔當類似於根節點的節點，其background背景色被瀏覽器俘獲，所以瀏覽器介面背景色為body裡面background的背景色，

一旦

設定了節點的background背景色之後，的背景色將失效。

也就是說一旦html標籤含有背景色，則的背景色變成了正常的標籤（乙個實實在在，普普通通標籤）的背景色，而此時的標籤最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。

例如下面的簡短**：

html

body

2.關於高度百分之百

要想高度百分比起作用，一般來說，要滿足

兩個條件

：其一，父標籤有高度可尋，就是向上遍歷父標籤要找到乙個定值高度（body，html另外討論），如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用；

其二，標籤本身的屬性，如果inline屬性的標籤，如果沒有浮動，zoom，或是絕對定位之類屬性是不支援百分比高度的，block或inline-block屬性可以說是高度百分比起作用的前提條件之一吧。

而這裡要講的是關於body和html的高度百分比顯示的。

實際上，不是高度100%顯示的，

當你只描述了body的背景色，瀏覽器的顏色就是定義的background 顏色，給你一種錯覺就是滿屏顯示的，實際上這是因為瀏覽器把你設定的body的背景色獲取了然後設定成瀏覽器的背景；正如上面所推斷的，此背景已非之背景。用下面這個一測便知。

效果：

如果你沒有特殊宣告，瀏覽器會自動設定div的width為100%；

但是瀏覽器不會自動設定div的高度，乙個div的高度是由子div的高度撐起來的