|
本文地址：http://www./wordpress/2009/09/%E5%AF%B9html%E4%B8%8Ebody%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/ 一,、寫在前面的
最近一直構思著寫篇關于html標簽的文章，雖說之前處理過html標簽,，也解決過不少棘手的問題,，但是對其理解還不是很透徹，很多原理都是自己推測的,。
在網上查閱相關資料想整合一下相關的信息,，發(fā)現深入探討html，與body的文章很少,，只有在藍色理想看到一篇“一葉千鳥”的這篇“正確認識html與body”有點價值,，其余都沒有什么相關的好文章。
而這里,，我要講述的與上面的交集并不多,，只要是講述一些關于html與body的各種表現，以及我自己對這些表現的合理的解釋和并提供一些過去處理類似問題的經驗,，希望對大家能夠有所幫助,。 二、關于html與body的一些表現
1.背景色
一般情況下,，我們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節(jié)點的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像素寬的圖片,，仔細看還是會發(fā)現IE6下margin沒有起作用,，頂邊的是30像素的邊框，Firefox下margin起作用了,，可以看到30像素的邊框外部還有一段間距,。此圖html標簽背景色的全屏顯示也進一步證明了我上面有關背景色顯示原理的推論,。 3.關于滾動條
打開一個空白頁面，觀察瀏覽器右側,，會發(fā)現IE瀏覽器會有一段滾動條的槽道,，而Firefox瀏覽器下沒有。  空白頁面下IE和Firefox火狐瀏覽器左側的滾動條與否 Firefox下沒有滾動條,，有時候會產生體驗上的一些問題,，比如：假設一個頁面高度有限，無滾動條,，當鼠標移到一個元素上,，要顯示一個浮動層，但是這個浮動層有一定的高度,，加上鼠標位置偏低，一旦浮動層出現,，說不定頁面的高度被撐高并出現滾動條,，這是在Firefox瀏覽器下就會產生頁面的晃動，原因是滾動條的出現導致頁面的寬度減小,，布局發(fā)生一些偏移,，而這種便宜造成的體驗是不好的。如何避免呢,？很多人會想到設置body{overflow-y:scroll;}Firefox下是出現了滾動槽了,，但是IE下出現了兩個滾動條，如下：
可能有人會想到hack,，no,，no，no,，其實仔細想一想,，問題很簡單。為什么IE會產生雙固定條,，里面那一個肯定是body的,，那么外面的那一個呢？啊,，或許您想到了,，html標簽的，就是說默認狀態(tài)下,，IE6下html有個overflow:scroll;屬性,，證明很簡單，您設置html標簽overflow:hidden;看滾動條是否沒有了（我這里證明是沒有了）,。所以呢,，只要在css中些寫上： 就可以讓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屬性參合進來,，事情就要發(fā)生轉變了,。問題代碼： 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的高度百分比顯示的,。
默認狀態(tài)下,，body不是高度100%顯示的，不要看body定義background屬性好像body就是滿屏顯示的,，正如上面所推斷的,，此背景已非body之背景,。用這個body{background:#039; border:50px solid #C00;}一測便知?？催吙蚍秶欠窀叨?00%顯示,，答案是否定的。見下圖（截自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這兩個標簽里面蘊含的知識是很多的,，我這里全當拋磚引玉，更多的內容還需要您去研究去探索,。
|
