box-sizing问题

您好，content-box是默认值，例如：

div {

        width: 200px;

        height: 200px;

        border: 1px solid red;

        padding: 10px;

        /*box-sizing:border-box;*/

        box-sizing: content-box;

    }

在这种情况下，border包裹的区域宽为：div的width(200)+左右的paddding(20)+左右的边框宽（2）=222；高也是同理。真正能放内容的地方就是css中定义的200*200.

而如果设置为border-box，那浏览器上显示的这个div框的总宽就是css中设置的200，高也是设置的200，里面已经包含了padding和border所占据的部分，而它真正可以放内容的部分其实没有200*200那么大。

如果解决了您的问题，请采纳，祝学习愉快~