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>

发表评论