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
6
要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（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/