盒子模型 Box Model

　　刚听到盒子模型（Box Model），每个人都会觉得很郁闷。确实，这是一个有点抽象的名词。

　　回想我们生活中的盒子，一般来说都是一个个的三维容器。最常见的就是文具盒、礼品盒、储物箱等等。这些东西通常是一个具有长、宽、高等描述大小属性的立方体，我们可以用它来存放东西。

　　Web页面中的“盒子”和现实中的“盒子”作用一样，都是为了存放东西，或者称之为容器。

　　现实世界是一个三维的世界，而电脑显示器为我们展示的是一个二维画面，无论它如何的模仿三维效果（3D），它都不可能摆脱它是二维画面的本质。到Web页面中，更是如此。

　　所以我们不得不面对一个事实，Web页面中的盒子将是一个平面的“盒子”。从这里，或许就开始有点抽象了。不过我们先接受一个事实：平面“盒子”没有“高”这个属性，所以我们页面中的几乎所有对象对于大小属性的描述至多有长和宽两个方向的选项。

　　回到Web页面中。

　　页面中的内容归根结底是为了显示给我们看的（要不然那个傻乎乎的大家伙也不叫“显示器”了）。而我们人的眼睛接收的都是图像信息，包括Web页面中的图像、文字、动画、视频等等。

　　这些页面中的图像、文字、动画、视频才是我们需要为用户传递的信息，也就是Web页面最终要处理的对象。

　　这些Web页面中的图像、文字、动画、视频在计算机中都是以一个具有长、宽属性的方块呈现的，而我们页面布局就是为了更合理的摆放这些东西。所以我们要讲的“盒子”就是为了存放这些东西，并将这些东西呈现在页面中的适当位置中。

　　举一个例子。假如你是一个仓库管理员，老板给你一大堆东西（假设有书籍等遇潮湿易损毁的东西，有玻璃制品等怕碰怕摔的东西……），而仓库是一个破旧地下室（我们知道一般地下室都比较易潮，扣门的老板！），让你把这些东西放到整个仓库中。

　　这时候我们就不得不考虑以下几个因素：为了易于搬运，我们需要选择足够厚度、足够结实的箱子存放；因为书籍等怕潮湿，我们必需保证其离墙壁有一段距离（当然通风是必需的），玻璃制品怕碰，我们需要在箱子里垫上足够厚度的保护层……

　　整个规划中我们主要体现出了以下几点：盛装物品的“盒子”的厚度、“盒子”与墙壁（其它物体）的距离和盒子内部填充物（保护层）的厚度。

　　到此为止，我们知道了如何使用“盒子”存放物品。

　　同样，在Web页面中的“盒子”也是同样的结构：厚度、边距（边缘与其它物体的距离）、填充（填充厚度）。引申到CSS中，就是border、margin和padding。当然，不能少了内容。也就是说整个盒子在页面中占的位置大小应该是内容的大小加上填充的厚度再加上边框的厚度再加上它的边距。

 

盒子模型示意图

　　因为HTML页面是一个层级的“树”，所以盒子的嵌套使用是很正常的，就像平时我们使用盒子分门别类的存放东西，最后放到一个大箱子里一样。

　　总体来说，使用“盒子模型”这个名称还是非常形象的。它和现实中的盒子非常相似。如果你能把现实世界中的三维的盒子抽象到二维平面中，你就已经理解什么是“盒子模型”了。

 （转载请注明出处：http://www.cnblogs.com/zhhh/）