html,body設定{height:100%}
一般情況下，我們css控制的最高節點就是body，例如設定：
body{background:#069;}則瀏覽器介面就是完全的#068的背景色。這裡看上去是<body>標籤下的背景色起作用了，我到不這麼認為，這裡不是body的background起作用，而是body作為一個根節點起作用了，<html>標籤未被啟用，body擔當類似於根節點的節點，其background背景色被瀏覽器俘獲，瀏覽器介面背景色為background的背景色，以上是我的推論，這種推論不是我憑空想象出來的，而是有一定的根據的。看下面的一段css程式碼：
body{background:#069; margin:100px; border:30px solid #093;}意思很簡明：外邊距100畫素，邊框30畫素，背景色#069，按照對一般標籤的理解，100畫素的外邊距應該不含有背景色的，然而顯示的結果是（Firefox下表現與此類似）：
IE6下body設定background顏色邊框和邊距後的表現
還有一點可以證明我上面的推論，就是一旦設定了<html>節點的background背景色之後，<body>的背景色將失效。例如下面的簡短程式碼：
html{background:#999;}
body{background:#069; margin:100px; border:30px solid #093;}跟上面的想比，就是添加了html的背景色，結果（截自IE6，Firefox瀏覽器下表現一致）：
html標籤設定背景色後的樣式表現
結果是什麼呢？<body>標籤的滿屏的背景色不見了，“失效”了。其實，在我看來，不是“失效”，是生效了。當<html>標籤無背景樣式時，<body>的背景色其實不是<body>標籤的背景色，而是瀏覽器的。一旦html標籤含有背景色，則<body>的背景色變成了正常的<body>標籤（一個實實在在，普普通通標籤）的背景色，而此時的<html>標籤最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。
2.margin支援
從上面的例項可以看出，無論是IE6瀏覽器，還是Firefox瀏覽器，<body>
margin屬性是支援的，padding也是如此，那麼對於<html>標籤呢。如下測試程式碼：html{background:#999;margin:100px; border:30px solid #093;}
body{background:#069; margin:100px; border:30px solid #093;}html標籤也增加了margin間距和30畫素的邊框，結果如下：
IE6下：
IE6瀏覽器下html對margin不敏感不支援
Firefox瀏覽器下：
Firefox瀏覽器下html標籤支援margin外邊距
這是縮放到500畫素寬的圖片，仔細看還是會發現IE6下margin沒有起作用，頂邊的是30畫素的邊框，Firefox下margin起作用了，可以看到30畫素的邊框外部還有一段間距。此圖<html>標籤背景色的全屏顯示也進一步證明了我上面有關背景色顯示原理的推論。
3.關於滾動條
開啟一個空白頁面，觀察瀏覽器右側，會發現IE瀏覽器會有一段滾動條的槽道，而Firefox瀏覽器下沒有。
空白頁面下IE和Firefox火狐瀏覽器左側的滾動條與否
Firefox下沒有滾動條，有時候會產生體驗上的一些問題，比如：假設一個頁面高度有限，無滾動條，當滑鼠移到一個元素上，要顯示一個浮動層，但是這個浮動層有一定的高度，加上滑鼠位置偏低，一旦浮動層出現，說不定頁面的高度被撐高並出現滾動條，這是在Firefox瀏覽器下就會產生頁面的晃動，原因是滾動條的出現導致頁面的寬度減小，佈局發生一些偏移，而這種便宜造成的體驗是不好的。如何避免呢？很多人會想到設定
body{overflow-y:scroll;}Firefox下是出現了滾動槽了，但是IE下出現了兩個滾動條，如下：
可能有人會想到hack，no，no，no，其實仔細想一想，問題很簡單。為什麼IE會產生雙固定條，裡面那一個肯定是<body>的，那麼外面的那一個呢？啊，或許您想到了，<html>標籤的，就是說預設狀態下，IE6下html有個overflow:scroll宣告，證明很簡單，您設定<html>標籤overflow:hidden看滾動條是否沒有了（我這裡證明是沒有了）。所以呢，只要在css中些寫上：
html{overflow-y:scroll;}就可以讓IE和Firefox（包括chrome）瀏覽器預設產生滾動條的滾動槽了。
4.關於background的fixed固定定位
Firefox是支援background:fixed定位的，IE6只能說是半支援，好吧，這麼說吧，可能不太嚴謹，就是背景圖片固定的效果似乎只在根結點起作用。舉個很簡單的例子：
先看這段css程式碼：
body{background:url(../image/404.png) no-repeat fixed center center;}
div{height:2000px;}HTML部分為：
<body><div></div></body>
其結果是無論IE6還是火狐瀏覽器下，背景圖片都是固定的死死的，不錯。但是，一旦<html>標籤帶著background屬性參合進來，事情就要發生轉變了。問題程式碼：
html{background:white;}
body{background:url(../image/404.png) no-repeat fixed center center;}
div{height:2000px;}結果IE6下，背景不固定了，只看到背景圖片隨著滾動條上下移動而移動。演示頁面
要解決這個問題呢，也是有辦法的，就是將fixed屬性值轉移到html標籤上就可以了。即：
html{background:white url(../image/404.png) no-repeat fixed center center;}
div{height:2000px;}就可以了。
5.關於height:100%;
要想高度百分比起作用，一般來說，要滿足兩個條件：其一，父標籤有高度可尋，就是向上遍歷父標籤要找到一個定值高度（body，html另外討論），如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用；其二，標籤本身的屬性，如果inline屬性的標籤，如果沒有浮動，zoom，或是絕對定位之類屬性是不支援百分比高度的，block或inline-block屬性可以說是高度百分比起作用的前提條件之一吧。
而這裡要講的是關於body和html的高度百分比顯示的。
預設狀態下，<body>不是高度100%顯示的，不要看<body>定義background屬性好像<body>就是滿屏顯示的，正如上面所推斷的，此背景已非<body>之背景。用下面這個一測便知。
body{background:#039; border:50px solid #C00;}看邊框範圍是否高度100%顯示，答案是否定的。見下圖（截自IE6，Firefox瀏覽器下表現一致）：
body預設高度是不100%顯示的
那麼<body>是否支援height:100%呢？經過我的測試，IE6支援，Firefox瀏覽器不支援。
要想讓Firefox瀏覽器也支援<body>的height:100%是簡單的，就是設定<html>標籤height:100%，一旦設定了height:100%則無論哪個瀏覽器下<body>都支援height:100%了，而<body>內部的容器也可以支援height:100%了。
前段時間看到百度的一道面試題，說什麼透明層無論滾動與否都滿屏顯示，其實就是對<html>和<body>標籤做一番手腳，兩者高度100%顯示，同時溢位隱藏（overflow:hidden），然後用一個<div>高度100%顯示，溢位滾動。而這個透明層就使用絕對定位且與這個<div>平級，高寬100%顯示，就可以使得無論怎麼滾動這個透明覆蓋層都是滿屏顯示的。這其實也就解決IE6下浮動層固定定位的經典方法。
6.關於html，body的css hack
不知不覺講了不少了，這就算最後一條吧。
我見過的有關<html>和<body>標籤的hack有這麼幾個，一個是* html body，一個是*+html，還有個是html > body，以及body:nth-of-type(1)。前者是經典的IE6 css hack，在當前主流瀏覽器中，就IE6支援，其含義是指在<html>標籤外還有一個隱藏的幽靈標籤，我也不知道什麼東西，反正IE6認得它就行了。*+html據說只有IE7認得它。html > body也據說就IE7認識它，而body:nth-of-type(1)是針對chrome瀏覽器的hack，意思是說某某標籤的第一個元素，因為一個頁面就只有一個<body>標籤，所以這個肯定會成立的，所以body:nth-of-type(1) div{height:1px;}這個hack就會起作用了。
三、最後的結語
技術無止境，css這東西真是很博大精深，即使我鍵盤敲了不知多少個小時，還是有些話沒有說完。要是再結合JavaScript，demo展開說的話，可能要通宵才能說完。這裡就先講這些，點到為止。關於html和body這兩個標籤裡面蘊含的知識是很多的，我這裡全當拋磚引玉，更多的內容還需要您去研究去探索。