今天来给大家详细剖析一下盒子模型。
盒子的构成：内容(content)、填充(padding)、边框(border)、边界(margin)。
盒子模型既然说是盒子模型，那么可以猜到这个模型来源于生活中的盒子。
假设你想送别人一个水晶娃娃。那么你肯定会把娃娃精美的包装起来，又因为娃娃是水晶的，很怕摔坏，所以在包装的时候就要在里面添加一些防震的东西，向泡沫，或者布条啦。
如果把整个包装好的礼物用盒子模型来解释的话：
内容：就是水晶娃娃。
Padding：里面填充的防震东西。
Border：就是整个的盒子了，盒子有厚度属性。
Margin:假设别人，也送了一个盒子礼物，主人将两个礼物放在一起，一个礼物与另外一个礼物之间的距离，就用 Margin描述。
盒子模型有了两种：ＩＥ盒子模型和标准盒子模型
区别就在于设置一个块级元素时的width和height属性从图中可以看出来。
那么有两个盒子模型，我们用那个啊？当然是使用标准的盒子模型了---------标准 W3C 盒子模型
如何使用那？就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
在网页设计中
每个HTML属性都可以看做一个盒子。
内填充与边界的规则：
如果有四个参数：表示上右下左,也可以单单指定某个方向
如果只有一个参数：表示上右下左
如果有两个参数： 第一个参数表示上下 第二个参数表示左右
如果三个参数：表示上 左右 下
举个例子：
对于盒子嵌套盒子的问题，内部的盒子是以外部盒子的Content为标准的，从content的地方开始算内部盒子的margin.
如果在嵌套盒子里一个自盒子Float：right。那么这个盒子没有脱离父盒子的控制。
子DIV没有浮动之前的父ＤＩＶ的content。
这个是子ＤＩＶ左右浮动之后
Float1,2的margin是从父DIV输入father之后的下边线为基准的。但是这时候父DIV只是给他们一个基准，当其左右浮动之后的content已不再包含他们。
对于并排的盒子是从两个盒子的margin开始计算的
下一篇接着讲解
原文地址：http://blog.csdn.net/u010924878/article/details/46484439
