1、css3新增属性box-sizing:

css3新增属性box-sizing:可以改变盒子模型

1.计算盒子大小公式：

盒子的总宽度= width+左右padding+左右border

盒子的总高度= width+上下padding+上下border

做个测试:给两个div盒子加同样大小的padding和border，并给两个盒子不同的背景颜色(background-color)颜色加以区分

    <div>content-box</div>
    <div>border-box</div>

        div:first-child{
            height: 200px;
            width: 200px;
            background-color: pink;
            padding: 20px;
            border: 10px red solid;
            box-sizing: content-box;
        }
        div:last-child{
            height: 200px;
            width: 200px;
            background-color: plum;
            padding: 20px;
            border: 10px red solid;
            box-sizing: border-box;
        }

第一个盒子加个box-sizing: content-box;表示该div为原来的盒子模型，
这个时候盒子的总宽度= width+左右padding+左右border，也就是w3c现在默认的盒子模型

image.png

第二个盒子加新属性 box-sizing: border-box;表示该div为css3的盒子模型，
这个时候盒子的总宽度=width

image.png