初识盒子模型

       什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

       这个盒子模型可以用我们日常生活中的“箱子”来形容，箱子里面装的东西就相当于盒子模型中的Content，如果我们怕箱子中装的东西摔坏了就需要在里面填充一些泡沫等，这个泡沫就相当与盒子模型中Padding，而箱子本身就相当于Border了，我们在摆放箱子的时候需要与其他物品之间留一个间隙，方便取出以及通风等，这个间隙就相当于盒子模型中的Margin。

盒子模型与现实生活中的箱子的区别：
       在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

盒子模型的作用：
实现结构与表现分离
       在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举例：

CSS版：

<style type="text/css">
<!--
#photoList img{
　　height:80;
　　width:100;
　　margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

不用CSS：

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />

  第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，使用CSS的好处代码更容易阅读，代码不复杂，网页文件体积小能较快被客户端下载了。  
总结的还有很多不足，希望各位读者不吝赐教，感谢您的阅读！