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

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

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 的理解方式类似mdash;mdash;如果内容高度超过 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 点mdash;mdash;充满 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 啊

IE7hellip;hellip;想说爱你不容易hellip;hellip;

IE5 以及 Quirks 模式

◎html 和 body 所有宽高设置都会被忽略而保持充满视区。

◎html 不接受 padding 和 margin。

◎body 接受 padding 和 margin 但负值 margin 没有视觉效果，不过会在计算其他相应参数时带入。

◎body 的 border, background 等属性会向上转移给 html 元素。

◎initial containing block 是 body 的 padding 边缘。

用处

这个总结是从一开头的布局问题引出来的，那个布局问题就是用处之一，等下重写一个 post

来整理。但那个布局只用到了很少一部分特性，应该还有更多的潜力可以挖，慢慢研究吧。