解决CSS给盒子设置内边距和边框时会撑大盒子的问题

原因：之所以会撑大盒子是因为在浏览器中会按照我们写的代码来计算一个最终的尺寸

计算方式如下：

这里我给盒子设置如下属性 

.box {
    width: 100px;
    height: 100px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    border: 5px solid #0000;
    background-color: #ddf17c;
}

那么盒子最终的高度就是 100（height）+ 10（padding-top）+  40（padding-boutton）+10 （上下方向boder总值）= 160

盒子最终的宽度就是 100（width）+ 20（padding-left）+  30（padding-right）+10 （左右方向boder总值）= 160

解决方法

一：启动内减模式

添加CSS属性 box-sizing: border-box;