CSS3盒子模型border-box

CSS3中可以通过box-sizing来指定盒子模型，有2个值：content-box、border-box，这样我们计算盒子大小的方式就发生了改变

1. box-sizing:content-box盒子大小为width+padding+border
2. box-sizing:border-box盒子大小为width

如果盒子模型改为了box-sizing:border-box，那么padding和border就不会撑大盒子了（padding和border不会超过width）

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: brown;
        border: 20px solid rosybrown;
        padding: 20px;
        box-sizing: content-box;
    }

    p {
        width: 200px;
        height: 200px;
        background-color: brown;
        border: 20px solid rosybrown;
        padding: 20px;
        box-sizing: border-box;
    }
</style>

<div>盒子模型</div>
<p>盒子模型</p>

<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
</style>