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

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

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

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

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

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

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

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

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

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

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

　　好亂，整理下來(lái)除了頭大還是頭大，不知道以后回過(guò)頭再看還能不能看明白。IE7 啊 IE7……想說(shuō)愛(ài)你不輕易……

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

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