盒子模型

盒子模型分为两种，一种是W3C定义的盒模型:

margin-left + border-left + padding-left + content + padding-right + border-right + margin-right
元素的宽度 = content部分，但是，元素占据的位置是需要将marign ， padding ，border都加上的。
标准盒模型，content部分，不包含其他部分

标准盒模型图

还有一种是IE盒模型：

ＩＥ盒模型图

IE盒模型也包含margin,padding ,border和content,不同的是，IE盒模型的 content 部分包含了 border 和 padding。
举个例子说明一下：
有一个盒子，margin 是10px,padding是10px,border是1px，content的宽是100px，高是50px，在标准盒模型下，

这个盒子占据的大小就等于：10*2+1*2+10*2+100=142px；
高度等于：10*2+1*2*10*2+50=92px；
盒子的实际大小为：宽 1*2+10*2+100=122px、高 1*2+10*2+50=72px；

在IE盒模型下，

这个盒子占据的大小就等于：10*2+100=120px；
高度等于：10*2+50=72px
盒子的实际大小为：宽 120px、高 50px；

通过上述内容，我们已经明白标准盒模型和IE盒模型的区别，还需注意一点，盒子占据位置的大小不等于盒子的实际大小，无论是标准盒模型还是IE盒模型，在计算盒子的实际大小时，都不需要计算margin值。
—————————————————————————————————————————
实际上，IE的盒子模型更符合我们生活中所见的盒子，所以，在css3中，新增了一个属性，
box-sizing ，这个属性包含两个值，content-box和border-box，简单来说，content-box就是标准盒模型，border-box就是IE盒模型，大家可以根据实际需要自己选择用哪个值。
下面是对两个属性的一个图文解释

 .box{
            box-sizing: content-box;
            width:100px;
            height:70px;
            padding:10px;
            border:5px solid #ccc;
        }

content-box

 .box{
            box-sizing: border-box;
            width:100px;
            height:70px;
            padding:10px;
            border:5px solid #ccc;
        }

border-box

我们可以看出，content-box在计算盒子实际大小时，是根据标准盒模型来计算的，而border-box是根据IE盒模型来计算的。