html元素xhtml文档根元素特性小结_XHTML教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
<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 来整理。但那个布局只用到了很少一部分特性,应该还有更多的潜力可以挖,慢慢研究吧。
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 来整理。但那个布局只用到了很少一部分特性,应该还有更多的潜力可以挖,慢慢研究吧。
相关XHTML教程:
- 相关链接:
- 教程说明:
XHTML教程-html元素xhtml文档根元素特性小结。