如何不让border或padding值撑大盒子

只需要设置简单的一个属性就好啦
先看一下效果吧

两个盒子的width、padding、border值都是一样的，但下边的盒子明显小很多，对不对
其实只需修改一下box-sizing属性就好了

<style>
        div {
            height: 80px;
            width: 80px;
            border: 10px solid pink;
            padding: 10px;
            background-color: aqua;
            /* 默认content-box，盒子宽度=width+border+padding */
            box-sizing: content-box;
        }
        p {
            height: 80px;
            width: 80px;
            border: 10px solid pink;
            padding: 10px;
            background-color: aqua;
            /* css3盒子模型 ,盒子宽度==width*/
            /* 前提：border+padding不能超过200 */
            box-sizing: border-box;
        }
    </style>

<div>小猪猪 </div>
<p>小猪佩奇</p>