盒子模型

在网页制作的过程中，我们经常需要对网页进行布局，在布局过程中最典型的就是盒子模型，如下图：

盒子模型就是我们平时装东西的箱子，盒子模型有内容(content)、填充(padding)、边框(border)、边界(margin)这四个最基本的属性。

盒子模型与我们平时装东西的箱子又有什么联系呢？

内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料，宽度代表盒子里的东西与盒子内边距的距离；
边框(BORDER)就是盒子本身了，宽度就是盒子本身的宽度；
边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

有什么区别呢？
现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性。

在HTML里面盒子模型的具体应用：

盒子模型只能应用于块级元素如div，每一个div都可以看作一个盒子

#top, #search, #main, #footer {
    margin:10px auto 10px auto; //各个模块件的距离是10px；
    width:900px ;                  //宽度为900px；
    margin-left :auto;             
    margin-right :auto;
    border :10px;                   //边界线的宽度为10px；

}