首先说明一下这是个人的总结，如有错误，请指出：
在布局中，一切都是盒子。网页布局（本人仅仅指代：div+css布局）换一种说法就是面向“盒子”编程。所有的东西都是在一个个盒子中的体现的，也就是说盒子的摆放是布局的基础。
经验：
- 大部分浏览器的默认都有margin和padding的，所以为了不影响我们的布局，先清除样式。
- 在布局中要注意几个地方：
-
内容高度想自适应怎么办？
<html> <head><title>Test Page</title> <style type="text/css"> #content_auto_height{ height:auto;/*注意这句话，自适应用的*/ width:80%; margin-left:10%; margin-right:10%; background-color:yellow; } #content_fix_height{ height:120px;/*注意这句话，固定了高度*/ width:80%; margin-left:10%; background-color:purple; margin-right:10%; overflow:scroll;/*注意这句话规定了溢出部分的滚动，不想滚动就用hidden*/ } #content_fix_height .subContent{ overflow:inherit;/*这是细化的一个小布局，用来体现content_fix_height的效果，其中的inhert表示继承父元素的overflow的scroll属性，否则浏览器会默认添加visual属性*/ } </style> </head> <body> <div id="content_auto_height"> <h2>11111111</h2> <h2>22222222</h2> <h2>33333333</h2> <h2>44444444</h2> <h2>55555555</h2> <h2>66666666</h2> </div> <div id="content_fix_height"> <div class="subContent"> <h2>11111111</h2> <h2>22222222</h2> <h2>33333333</h2> <h2>44444444</h2> <h2>55555555</h2> <h2>66666666</h2> </div> </div> </body> </html>
-
清除多余格式怎么办？
*{/*最简单有效的，但是耗费时间*/ padding:0px; margin:0px; } body{/*节省点资源，针对性强*/ padding:0px; margin:0px; } body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} /*针对性更强大的*/
3.什么是浮动？
通俗来说，浮动可以理解成一种动作，就是这个块本身自己向某方向运动，如果没有阻挡就一直往那个方向浮。比如：float:left，那么元素就一直像左侧浮动。直到左侧有东西拦着它。。。就像回滚一样。
就这些吧。。。。。
