对于初学者来说，CSS中的width、height的默认值是很神奇的，因为经常看到如下这样的代码：明明只给一个#father标签（红色的div）设置了一个width，为啥它在浏览器中显示出来是有一个固定的height的呢。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试宽度</title> <style type="text/css"> .body{ margin: 0; padding: 0; } #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的宽度了。