css-对body的height理解

前言

看到 html,body{height:100%} 这样一行代码。挺有意思。

某个现象

据我了解 body默认的width就是浏览器的宽度,body的height是有内部子元素撑起来的。看如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body</title>
<style>
*{
margin:0px;
padding: 0px;
}
body{
width: 500px;
height: 500px;
border: 10px solid #f00;
background-color: #ff0;
}
body div{
width: 100px;
height: 100px;
border: 10px solid #00f;
background-color: #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

结果如下:

说明

我设置了body的宽度和高度。然后设置了body的背景颜色。结果body的背景颜色变成了整个页面的背景颜色。有人说,这是body的特性,记住就行了。但其实这只是我们没有理解html和css的托词。当我把代码样式改成如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
margin:0px;
padding: 0px;
}
html{
background-color: #fff;
}
body{
width: 500px;
height: 500px;
border: 10px solid #f00;
background-color: #ff0;
}
body div{
width: 100px;
height: 100px;
border: 10px solid #00f;
background-color: #000;
}

结果如下:
发现body的标签背景颜色正常了。

张鑫旭大大的说法

1
当<html>标签无背景样式时,<body>的背景色其实不是<body>标签的背景色,而是浏览器的。一旦html标签含有背景色,则<body>的背景色变成了正常的<body>标签(一个实实在在,普普通通标签)的背景色,而此时的<html>标签最顶级,背景色被浏览器获取,成为浏览器的背景色。

关于height:100%

1
2
3
4
5
要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用;其二,标签本身的属性,如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。
而这里要讲的是关于body和html的高度百分比显示的。
默认状态下,<body>不是高度100%显示的,不要看<body>定义background属性好像<body>就是满屏显示的,正如上面所推断的,此背景已非<body>之背景。

个人补充

在看w3官方的文档的时候,看到一个“根元素”的定义。大致上是说,w3规定html为根元素,但是很多浏览器没有遵循,把body当做默认的根元素了。 所以当我们不设置html的background-color等属性的时候,body作为默认的根属性,此时body是作为根元素的角色而存在的。所以它会有根元素的特性。

参考

http://blog.csdn.net/javaloveiphone/article/details/51098972
http://www.zhangxinxu.com/wordpress/2009/09/%E5%AF%B9html%E4%B8%8Ebody%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/