标准盒模型和IE盒模型

前言

盒模型是CSS中一个十分重要的概念，掌握好它对网站的构建有十分深刻的作用。

盒子模型可分为两种，标准w3c盒模型以及IE盒模型。这篇文章就是探讨这两者以及具体应用。

---

盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。

盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

IE盒模型

概念： ie 盒子模型的范围包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

IE盒模型

例如一个盒子模型如下：margin:40px,border:20px,padding:20px;width:200px;height:100px;
则用IE盒模型来解释为：
该盒子在网页中占据的大小有：
高：40x2+100=180px
宽：40x2+200=280px
盒子的实际大小为：高：100px；宽：200px；

标准盒模型

概念：盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准盒模型

如上面的盒子模型：
margin:40px,border:20px,padding:20px;width:200px;height:100px;
则用w3c标准盒模型解释：
该盒子在网页中占用大小：
高：40x2+20x2+20x2+100=260px
宽：40x2+20x2+20x2+200=360px
盒模型实际大小：
高：20x2+20x2+100=180px
宽：20x2+20x2+200=280px

标准盒模型的几项注意

1. padding，border，margin都是可选的，默认值为0，但是浏览器会自行设置元素的margin和padding,则可以通过以下方式覆盖浏览器样式。注意：这里的*表示所有元素，但是这样性能不好，建议依次列出常用的元素来设置。

*{
     margin:0;
     padding:0
 }

2. 如果给元素设置背景，并且边框的颜色为透明，背景将应用于内容，内边距和边框组成的区域。

3. 水平格式化
   水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。
   其中margin-left，width，margin-right可以设置为auto。
   1.当其中一个设置为auto时，即其余两个属性有特定值，那么被设置为auto的属性会被拉伸或缩小至与父元素的宽相等。
   2.当margin-left和margin-right设置为auto时，则这是一种令块级元素水平居中的方式。
   3.当width和margin-left或者margin-right设置为auto，则margin-left和margin-right为 0，width会满足父元素的宽。

4. 垂直格式化
   垂直格式化与水平格式化的属性类似，即是对应的top和bottom，同样可设置margin-top、height和margin-bottom。
   1.不能将margin-top和margin-bottom设置为auto来使元素垂直居中
   2.垂直外边距合并:两个外边距之和应为30px；但实际上只取最大的边距20px
   html

   <div class="m20"> 外边距20px </div>
   <div class="m10"> 外边距10px </div>
   

   css

   .m20 { margin: 20px; }
   .m10 { margin: 10px; }