box-sizing 特性

box-sizing属性值有2个，border-box 和 content-box，
实例：

//html


//css
  .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }

此时的效果

image.png

看盒模型

image.png

此div的padding和border不会计算入width中
而当 box-sizing为border-box时，

查看盒模型

image.png

会发现，width变小了，
这是因为，box-sizing：borderbox时，div的宽度会把padding和border计算到实际width上；

总结：
content-box ,border和padding不计算入width之内
border-box， border和padding都计算入width内