CSS : W3C标准盒子模型和IE盒子模型

在写html与css的过程中，我们可以将每一个元素看做一个盒子，
对于普通的浏览器以及IE浏览器，有两套不同的解析盒子的方法，
第一种是W3C标准盒子模型，第二种是IE盒子模型，
下面重点介绍这两个盒子模型的区别。

1.如何区分

在CSS中有一个属性叫做box-sizing,对于标准的盒子模型，属性值为border-box,d对于IE来说叫做content-box。

2.内容区，盒子大小，所占空间的计算

标准盒子（以下以宽度计算，长度类推）

1. 内容区宽度 = width;
2. 盒子宽度 = width + padding-left + padding-right + border-left +
   border-right;
3. 所占空间 = 盒子大小 + margin-left = margin-right ;

IE盒子（以下以宽度计算，长度类推）

1. 内容区宽度 = width - padding-left - padding-right - border-left -
   border-right;
2. 盒子宽度 = width ;
3. 所占空间 = width + margin-left = margin-right ;

3.代码以及图示

<div>IE盒子</div>
<div>w3c盒子</div>


<style>
	div:first-child{
      width: 100px;
      height: 100px;
      border:10px solid red; 
      /*  IE盒子 width= contentWidth+2*padding+2*border */
    }
	div:nth-child(2){
      width: 100px;
      height: 100px;
      border:10px solid red;
      padding:10px;
      box-sizing: content-box;
	  /*w3c盒子width = contentWidth*/
    }
</style>