html元素 xhtml文档根元素特性小结_XHTML教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗霉閿濆牜鍤夋繛宸簼閺呮繈鏌涚仦鐐殤闁告梻鏁哥槐鎾存媴閹绘帊澹曢梻浣侯攰娴滎剟顢楅·鐛礛S闂傚倸鍊峰ù鍥х暦閻㈢ǹ绐楅柟鎵閸嬶繝鏌曟径鍫濆壔婵炴垶菤閺€浠嬫倵閿濆啫濡烽柛瀣崌瀹曟帡鎮欓弻銉ユ暪闂備礁鎼ú銊╁磻閻愮儤鍊垫い鎺嗗亾闁宠鍨块幃娆撳矗婢舵ɑ锛侀梻浣规偠閸斿酣宕伴弽褜鍤曞┑鐘崇閺呮悂鏌ㄩ悤鍌涘婵犵數濮烽弫鎼佸磻閻愬搫鍨傞悹杞拌濞兼牠鎮峰▎蹇擃伀闁绘繂鐖奸弻娑㈠焺閸愵亖妲堥梺缁樻尰閿曘垽寮婚垾鎰佸悑閹肩补鈧磭顔戦梻浣瑰▕閺€杈╂暜閿熺姴钃熼柕濞炬櫆閸嬪棝鏌涚仦鍓р槈妞ゅ骏鎷� 缂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾閽樻繈姊洪鈧粔瀵哥玻濡ゅ懏鐓欓梺顓ㄧ畱婢ч箖鏌ら弶鎸庡仴闁哄本鐩俊鐑筋敊閻撳寒娼荤紓鍌欒閸嬫挸顭块懜闈涘闁绘挸鍟撮弻鏇熷緞閸繂顬夐梺缁樼箥娴滎亪寮婚敐鍛斀闁圭偓娼欓锟� 闂傚倸鍊搁崐鎼佸磹妞嬪孩顐介柨鐔哄Т绾惧鏌涢弴銊ョ€柛銉ｅ妽缂嶅洭鏌嶉崫鍕殶妞わ富鍨辩换婵嬪閿濆棛銆愰梺鍝勭墱閸撶喎鐣峰Δ鈧オ浼村醇閻斿搫骞愰梻浣规偠閸庮垶宕濆澶嬪剭闁硅揪闄勯埛鎺戭熆鐠虹尨鍔熼弫鍫ユ⒑閸濆嫯顫﹂柛濠冪墪宀ｈ儻绠涘☉妯溾晠鏌ㄩ弮鍌滃笡妞ゃ儲绋撶槐鎾诲磼濞嗘垵濡介梺鍝ュ仜椤兘鐛箛娑欐櫢闁跨噦鎷� 闂傚倸鍊搁崐椋庣矆娓氣偓楠炴牠顢曢敃鈧悿顕€鏌ｅΔ鈧悧濠囧矗韫囨稒鐓欑紓浣靛灩閺嬫稒淇婇悙鎵煓闁哄备鈧剚鍚嬮幖绮光偓鑼晼闂備礁鎲￠〃鍡欏枈瀹ュ洦宕叉繛鎴欏灩楠炪垺淇婇婵愬殭闂傚绉撮埞鎴︻敋閸℃瑧蓱闂佸憡姊归〃濠囧春閳ь剚銇勯幒鎴濇灓婵炲吋鍔欓弻鐔碱敊閼测晛鐓熼悗瑙勬礃濞茬喖寮婚崱妤婂悑闁告侗鍨抽崢顒勬⒒娴ｈ姤纭堕柛锝忕畵楠炲繘鏁撻敓锟�,闂傚倸鍊搁崐宄懊归崶顒佸剭妞ゆ劧绠戠粈瀣亜閹扳晛鐏╃悮姗€姊绘担绛嬪殭婵﹫绠撻敐鐐村緞鐎ｎ剛顔曟繝鐢靛Т閸嬪棝宕甸弴銏＄厱妞ゆ劧绲剧粈鈧紓浣插亾闁告劏鏂傛禍婊堟煛閸屾氨浠㈤柟顔藉灦閵囧嫯绠涢弴鐐寸€剧紓浣虹帛閻╊垶鐛€ｎ喗鍊烽柡澶嬪灩濞堛倝姊绘担鍛靛綊顢栭崱娑樼闁搞儜灞剧稁闂佸憡绻傜€氀囧几鎼淬劍鐓欐い鏍ф鐎氼喗绂嶉鍫熲拻濞达絽鎲￠崯鐐烘煟閻旀潙鍔ら柟骞垮灩铻ｅ〒姘煎灠濞堛劍绻濋悽闈浶ｇ痪鏉跨Ч瀵煡骞栨担鍦弳闂佺粯娲栭崐鍦偓姘炬嫹!

　　<html> 元素，XHTML 文档中的根元素，再熟悉不过了。不过最近折腾一个布局，发现在 IE 中，它不是那么简单的角色，有一些很特殊的“性质”，总结一下备查：

IE6 标准模式：
　　◎不管给它设置什么样的高度和宽度，它的大小都始终充满整个视区。
　　◎不管给他设置什么样的 padding 和 border，同样，大小始终充满整个视区。
　　◎margin 会被忽略。
　　◎initial containing block 是视区矩形减去 <html> 的 border 宽度
　　用 CSS3 来表述，我们可以把 IE6 中的 <html> 看成 heigh:100%; width:100%; box-sizing:border-box; 的一个特殊元素，而且这些属性不可变。

IE7 标准模式：
　　IE7 虽说修复了 IE6 的若干 CSS bug，但对于 <html> 的理解，要比 IE6 复杂得多。IE6 虽然诡异但可以改的属性毕竟少，所以还算简单。IE7 的 <html> 倒是可以接受更多的属性了，但算法却不按照规范老老实实的来，所以搞明白它要比 IE6 头疼得多。

　　首先是自动扩展特性。
　　<html> 元素在 y 方向上比较简单，和 IE6 对普通元素 height 的理解方式类似——如果内容高度超过 <html> 的高度，或者 <html> 没有定高（即默认值 auto），那么 <html> 会自动扩展自身高度以包含其中内容。
　　而在 x 方向上有些诡异，问题主要集中在对 <body> 宽度的理解，这里分两种情况讨论：（不是说 <html> 么，怎么又说到 <body> 的宽度了？因为 <html> 要自动扩展，必须要知道 <body> 有多宽才好扩展嘛。）

　　第一种情况：<html> 的 width 如果是非 0 值之外的一切值（包括默认值 auto），那么 <body> 的宽度由以下规则决定：
　　1. 如果 <body> 的 width 是个固定值，那宽度就是这么多。
　　2. 如果 <body> 的 width 是默认值 auto，那宽度会充满 <html> 的内容空间。
　　3. 如果 <body> 本身有收缩包围特性，比如被设置了 position:absolute 或者 display:inline（奇怪的是 float 却不满足这一条，它满足2），那么就根据内容的宽度来定。

　　第二种情况：如果 <html> 的 width 是 0，那第 1、3 点和上面的情况相同，而第 2 点，如果 <body> 的 width 是默认值 auto，那宽度会根据内容自适应，但有一个奇怪的现象，就是如果 <body> 同时具有不为 0 的 border 或者 padding 时，它的宽度就不会根据内容自适应而会变成第一种情况下的第 2 点——充满 <html> 的内容空间，由于这时 <html> 的宽度是 0，所以 <body> 宽度也坍缩成 0。

　　其次是 <html> 的宽高设置会奇怪地影响 <body> 的百分比参考（或者说 <body> 的 containing block）。
　　在 y 方向上，如果 <html> 的 height 是默认值 auto，那么 <body> 的 height 如果取一个百分比的值，将会被忽略。但一旦 <html> 的 height 值有了一个具体高度，哪怕是 0，<body> 的百分比高度就会被应用了。不过诡异的是，这个百分比高度的计算参考并不是刚刚设置的 <html> 的高度，而是视区高度减去 <html> 的 margin+border+padding 高度之和。
　　而在 x 方向上，如果 width 取默认值 auto，和 y 方向不同，<body> 的百分比宽度将不会被忽略，但其计算参考依旧和 y 方向一样诡异，为视区宽度减去 <html> 的 margin+border+padding 宽度之和。如果 width 有了具体取值，它就会取而代之作为 <body> 的百分比宽度参考。

　　再次，当 <body> 设置为 position:absolute 时，<html> 的 border-color 会失效。这是另外一个奇怪的 bug。

　　最后，initial containing block 采用视区矩形，这个基本正常。但无法使 <html> 创建绝对定位元素的 containing block，不过也许 <html> 创建的 containing block 就是视区矩形，谁知道呢。

　　好乱，整理下来除了头大还是头大，不知道以后回过头再看还能不能看明白。IE7 啊 IE7……想说爱你不容易……

IE5 以及 Quirks 模式
　　◎<html> 和 <body> 所有宽高设置都会被忽略而保持充满视区。
　　◎<html> 不接受 padding 和 margin。
　　◎<body> 接受 padding 和 margin 但负值 margin 没有视觉效果，不过会在计算其他相应参数时带入。
　　◎<body> 的 border, background 等属性会向上转移给 <html> 元素。
　　◎initial containing block 是 <body> 的 padding 边缘。

用处
　　这个总结是从一开头的布局问题引出来的，那个布局问题就是用处之一，等下重写一个 post 来整理。但那个布局只用到了很少一部分特性，应该还有更多的潜力可以挖，慢慢研究吧。