对于初学者来说，CSS中的width、height的默认值是很神奇的，因为经常看到如下这样的代码：明明只给一个#father标签（红色的div）设置了一个width，为啥它在浏览器中显示出来是有一个固定的height的呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>测试宽度</title>
<style type="text/css">
.body{
margin:;
padding:;
}
#father{
width: 500px;
background: red;
}
#father .son{
width: 100px;
height: 100px;
background: green;
} </style>
</head>
<body>
<div id="father">
<div class="son"> </div>
</div>
</body>
</html>
于是就去w3c上搜索，发现height的默认值都是auto，也就是说上一行代码中的height是默认值auto。那么为什么会编程100px的高度呢。
通过查阅资料得知，如果将height设为auto，那么该标签的高度将由它的子标签的高来决定。也就是说会子标签会撑开父级标签。上面代码就是因为.son的100px的高度撑开了父标签father的高度。
那么宽度是否也会被撑开呢？
于是自己继续做了一次实验：把father的width注释，运行后发现father的宽度和浏览器等宽。查资料发现对于div标签来说width默认是100%，就是和父级标签等宽。所以不设father的宽度，他就默认等于body的宽度了。