盒子模型

在“盒子模型”中，页面中的所有元素都可以看成一个盒子（没错，行内元素也是一个盒子），并且占据着一定的页面空间。

盒子模型由content(内容)，padding(内边距)，border(边框)，margin(外边距)这四个属性组成，此外，在盒子模型中还有宽度width和高度height这两辅助属性。整个盒子模型可以用下图表示(截图来自火狐浏览器)：

其实盒子模型有两种，一种是w3c标准的盒子模型，另一种是IE盒子模型，这两者的区别在content部分中会讲到。
下面依次解释一下这四个属性：

1. content(内容区)：内容区域是css盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本，图片等多种类型，内容区是盒子模型必备的组成部分，其他三部分都是可选的。

   内容区有三个属性:width，height和overflow，这里必须注意一点，对于标准W3C盒子模型而言，width和height这两个属性是针对内容去而言，并不包括padding，border和margin部分。如下图代码所示：
   
   我们设置内容宽度和高度都为200px，浏览器中显示后按f12发现没毛病，确实内容区域width和height都为200px
   但是浏览器测量时是把border和padding也包括进去的(但是不包括margin)，这里要注意一下，如图：
   
   那么什么是IE盒子模型呢，在IE标准模式下，IE的width和height都是包括的padding和border部分的，这就是IE盒子模型，而在IE的quirks mode（怪异模式）下显示出的是和w3c标准盒子模型相同的效果。由于电脑上没装老版IE，难以模拟，各位可以在老版IE上试一下。
   如果想在现代浏览器上用IE盒子模型渲染，只需加上属性box-sizing:border-box即可。

   另外，当内容信息太多而超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。

2. padding（内边距）：内边距，指的是内容区和边框之间的空间，关于内边距的属性有5种:padding-top，padding-right，padding-bottom，padding-left以及简写形式padding。注意padding不可取负值，margin可以取负值。

   有一个关于padding的小技巧：就是要实现下图所示的按钮效果：
   
   我用另外的图来做演示，比如，这是背景图：分辨率为205*116
   要实现这样的效果：原理与上图中的按钮相同，首先代码如下：
   
   浏览器中显示效果是这样：
   这时，我们把width改成115px，再加上padding-left：50px，看看效果什么样：
   
   浏览器中预览效果：完美。

3. border（边框）：边框属性有border-width，border-style，border-color，以及简写形式border。
   有一个关于border的注意事项：border:0和border:none虽然都是不显示边框，但是border:0会让浏览器渲染一个width为0的边框，是要消耗内存的，而border:none在浏览器解析式并不会进行渲染，不需要消耗内存。

4. margin（外边距）：外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距的属性类似于padding，也有五种，同时margin允许取负值，当外边距指定负值时，整个盒子将向指定负值的方向移动，以此可以产生盒子重叠的效果，这就是传说中的“负margin技术”，另外还有一个外边距叠加的问题，首先我们来讲一下外边距叠加的问题。

   假如有两个div，A和B，一个在上一个在下，当我们为A定义了margin-bottom，为B定义了margin-top，我们会发现浏览器中显示的A和B的上下间距明显小于两div的外边距之和，这就是外边距的叠加。外边距叠加之后的外边距高度等于叠加之前两个外边距中的最大值，源代码如下：
   
   浏览器中显示效果如下：
   可以看到上下边距合并了
   对于外边距叠加，其实有三种情况，以上这种为同级元素之间，还有父子元素和空元素
   当一个元素包含在另一个元素中时（父子关系），假如没有内边距padding或边框border把外边距分隔开的话，父元素和子元素的相邻上下外边距也会发生合并，源码如下：
   将父元素的margin-top设置为10px，子元素的margin-top设置为30px，浏览器中效果如下：
   ——–很明显发生了合并。
   对于空元素，当一个空元素有上下外边距时，也必须在没有margin和padding的情况下，元素的上下外边距会发生合并。
   其中，空元素指的是没有子元素或没有文字内容的元素，比如“br”,”hr”元素。因为hr元素默认是有1px的边框的，所以默认情况下，上下外边距并不会发生合并。
   
   如果我们去掉分割线的默认边框：
   上下外边距就这样合并了。
   空元素的外边距合并还有另外一种情况，那就是当空元素的外边距碰到另外一个元素的外边距时，他们也会发生合并。代码如下：
   
   浏览器中效果如下：
   ——–合并成功。
   总结：
   外边距合并只有这三种情况，同级元素，父子元素，空元素。关于外边距合并，需要注意一下几点:
   1.水平外边距(margin-left和margin-right)永远不会叠加
   2.无论哪种情况下的外边距叠加，叠加之后的外边距都等于两外边距中的最大值。
   3.外边距叠加针对的时block和inline-block元素，不包括inline元素，因为inline元素的margin-top和margin-bottom设置无效。