html元素 xhtml文檔根元素特性小結(jié)_XHTML教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　<html> 元素，XHTML 文檔中的根元素，再熟悉不過了。不過最近折騰一個(gè)布局，發(fā)現(xiàn)在 IE 中，它不是那么簡單的角色，有一些很特殊的“性質(zhì)”，總結(jié)一下備查：

IE6 標(biāo)準(zhǔn)模式：
　　◎不管給它設(shè)置什么樣的高度和寬度，它的大小都始終充滿整個(gè)視區(qū)。
　　◎不管給他設(shè)置什么樣的 padding 和 border，同樣，大小始終充滿整個(gè)視區(qū)。
　　◎margin 會被忽略。
　　◎initial containing block 是視區(qū)矩形減去 <html> 的 border 寬度
　　用 CSS3 來表述，我們可以把 IE6 中的 <html> 看成 heigh:100%; width:100%; box-sizing:border-box; 的一個(gè)特殊元素，而且這些屬性不可變。

IE7 標(biāo)準(zhǔn)模式：
　　IE7 雖說修復(fù)了 IE6 的若干 CSS bug，但對于 <html> 的理解，要比 IE6 復(fù)雜得多。IE6 雖然詭異但可以改的屬性畢竟少，所以還算簡單。IE7 的 <html> 倒是可以接受更多的屬性了，但算法卻不按照規(guī)范老老實(shí)實(shí)的來，所以搞明白它要比 IE6 頭疼得多。

　　首先是自動擴(kuò)展特性。
　　<html> 元素在 y 方向上比較簡單，和 IE6 對普通元素 height 的理解方式類似——如果內(nèi)容高度超過 <html> 的高度，或者 <html> 沒有定高（即默認(rèn)值 auto），那么 <html> 會自動擴(kuò)展自身高度以包含其中內(nèi)容。
　　而在 x 方向上有些詭異，問題主要集中在對 <body> 寬度的理解，這里分兩種情況討論：（不是說 <html> 么，怎么又說到 <body> 的寬度了？因?yàn)?<html> 要自動擴(kuò)展，必須要知道 <body> 有多寬才好擴(kuò)展嘛。）

　　第一種情況：<html> 的 width 如果是非 0 值之外的一切值（包括默認(rèn)值 auto），那么 <body> 的寬度由以下規(guī)則決定：
　　1. 如果 <body> 的 width 是個(gè)固定值，那寬度就是這么多。
　　2. 如果 <body> 的 width 是默認(rèn)值 auto，那寬度會充滿 <html> 的內(nèi)容空間。
　　3. 如果 <body> 本身有收縮包圍特性，比如被設(shè)置了 position:absolute 或者 display:inline（奇怪的是 float 卻不滿足這一條，它滿足2），那么就根據(jù)內(nèi)容的寬度來定。

　　第二種情況：如果 <html> 的 width 是 0，那第 1、3 點(diǎn)和上面的情況相同，而第 2 點(diǎn)，如果 <body> 的 width 是默認(rèn)值 auto，那寬度會根據(jù)內(nèi)容自適應(yīng)，但有一個(gè)奇怪的現(xiàn)象，就是如果 <body> 同時(shí)具有不為 0 的 border 或者 padding 時(shí)，它的寬度就不會根據(jù)內(nèi)容自適應(yīng)而會變成第一種情況下的第 2 點(diǎn)——充滿 <html> 的內(nèi)容空間，由于這時(shí) <html> 的寬度是 0，所以 <body> 寬度也坍縮成 0。

　　其次是 <html> 的寬高設(shè)置會奇怪地影響 <body> 的百分比參考（或者說 <body> 的 containing block）。
　　在 y 方向上，如果 <html> 的 height 是默認(rèn)值 auto，那么 <body> 的 height 如果取一個(gè)百分比的值，將會被忽略。但一旦 <html> 的 height 值有了一個(gè)具體高度，哪怕是 0，<body> 的百分比高度就會被應(yīng)用了。不過詭異的是，這個(gè)百分比高度的計(jì)算參考并不是剛剛設(shè)置的 <html> 的高度，而是視區(qū)高度減去 <html> 的 margin+border+padding 高度之和。
　　而在 x 方向上，如果 width 取默認(rèn)值 auto，和 y 方向不同，<body> 的百分比寬度將不會被忽略，但其計(jì)算參考依舊和 y 方向一樣詭異，為視區(qū)寬度減去 <html> 的 margin+border+padding 寬度之和。如果 width 有了具體取值，它就會取而代之作為 <body> 的百分比寬度參考。

　　再次，當(dāng) <body> 設(shè)置為 position:absolute 時(shí)，<html> 的 border-color 會失效。這是另外一個(gè)奇怪的 bug。

　　最后，initial containing block 采用視區(qū)矩形，這個(gè)基本正常。但無法使 <html> 創(chuàng)建絕對定位元素的 containing block，不過也許 <html> 創(chuàng)建的 containing block 就是視區(qū)矩形，誰知道呢。

　　好亂，整理下來除了頭大還是頭大，不知道以后回過頭再看還能不能看明白。IE7 啊 IE7……想說愛你不容易……

IE5 以及 Quirks 模式
　　◎<html> 和 <body> 所有寬高設(shè)置都會被忽略而保持充滿視區(qū)。
　　◎<html> 不接受 padding 和 margin。
　　◎<body> 接受 padding 和 margin 但負(fù)值 margin 沒有視覺效果，不過會在計(jì)算其他相應(yīng)參數(shù)時(shí)帶入。
　　◎<body> 的 border, background 等屬性會向上轉(zhuǎn)移給 <html> 元素。
　　◎initial containing block 是 <body> 的 padding 邊緣。

用處
　　這個(gè)總結(jié)是從一開頭的布局問題引出來的，那個(gè)布局問題就是用處之一，等下重寫一個(gè) post 來整理。但那個(gè)布局只用到了很少一部分特性，應(yīng)該還有更多的潛力可以挖，慢慢研究吧。