css3:box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。(W3C上是这么解释的，说实话看不懂，我的理解就是规定盒模型的类型)

box-sizing属性可以为三个值之一：content-box（默认值），border-box，padding-box

content-box，border和padding不计算入width之内（宽度其实就是内容区宽度）-----标准盒模型

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了-----IE的盒模型

这就是盒模型:

平时所用到的也就是IE盒模型和标准盒模型：

IE盒模型的盒子宽度=Content+Padding+Border

标准盒模型的盒子宽度=Content

（这里的盒子宽度是指的我们CSS中赋值的width属性）

我们举个例子了解一下

   #box1{
           box-sizing:content-box;
           width:200px; 
           height:200px; 
           border:2px solid black; 
           padding:50px; 
           margin:50px; 
       }
		
   #box2{
           box-sizing:border-box;  
           width:200px; 
           height:200px; 
           border:2px solid black; 
           padding:50px; 
           margin:50px; 
        }      

        <div id="box1">
           box1
        </div>
        <div id="box2">
           box2
        </div>

下面这个是效果：

看一下他们的盒模型：

box1----标准盒模型

宽度为Content：200px

box2----IE盒模型

宽度为Content+padding+border:200px

然后我们可以通过js来获取元素的宽度，我们从这里可以发现，用jq的方法我们获取的是盒模型的Content大小；

console.log($("#box1").width()) //200;
console.log($("#box2").width()) //94; 

通过上面两个测试结果，再结合最上面去看了一下box-sizing里面每个属性的值的意义，我得到的结论是：

1.CSS中设置的元素宽度就是盒模型中的width;

2.标准盒模型中的width为content，IE盒模型中的宽度为content+padding+border;

3.页面上展示的盒模型（我们肉眼看出来的区域，根据两个div差异所说，所以没加margin）为content+padding+border，之所以box1是304是因为200+50*2+2*2，box2为200是因为94+50*2+2*2，差别就是前面说的content的大小；

4.标准盒模型下我们是先固定内容区域，然后再添加padding，boder从而形成一个盒子，而我们的IE盒模型下我们是先固定盒子，然后再添加border，padding，最后才是content；

     这里需要解释一下的就是，因为标准盒模型定义的元素宽度就是content，是已知的，所以盒模型在渲染的时候是从内到外，先渲染content，然后padding，然后border...但是IE盒模型我们定义的元素宽度是content+padding+border，content是未知的，所以盒模型在渲染的时候是从外到内，先是border，然后padding，最后再计算出content继续渲染；

那box-sizing:border-box到底有什么用呢？

从上面的分析我们可以看出来，当我们把两个具有一定间隔的div大小固定好了之后，就不用担心在扩展他们的border和padding使得其会碰撞在一起了。

现在我增加padding值和border的值

我们发现他们粘在一起了

现在我们增加box-sizing:border-box;