box-sizing

box-sizing三种属性值：

content-box： 是正常的w3c模型，border和padding不计算在width之内

padding-box： 是将padding计算入width之内

border-box： 也就是怪异模式border和padding计算入width之内

---

兼容性：

ie8+，谷歌浏览器支持content-box和border-box

火狐支持三种值

---

使用方法：

-webkit-box-sizing: 100px; // for safari, android

-moz-box-sizing:100px; //for 火狐

box-sizing:100px; //for other

说明示例：

    <style type="text/css">
        .content-box{
            box-sizing:content-box;
            -moz-box-sizing:content-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #E6A43F;
            background: blue;
        }
        .padding-box{
            box-sizing:padding-box;
            -moz-box-sizing:padding-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #186645;
            background: red;                
        }
        .border-box{
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #3DA3EF;
            background: yellow;
        }
    </style>

截图：