解决padding撑大div盒子的问题

前言

最近在优化项目的过程中，发现使用了padding以后。

当点击操作时盒子老是会被撑大，起初以为是因为设置margin的原因 但是也设置了溢出配置 overflow: hidden; 。

后来发现原来是padding的原因，去css查了一下，原来 盒子宽度=padding+border+内容宽度。

解决办法

1. 设置 盒子宽度=padding+border+内容宽度 可以解决盒子被撑大的问题
2. 在使用padding的 div里 设置

   box-sizing: border-box;

原因：因为在设置了 box-sizing: border-box; 以后 相当于把padding和border的值都算在content里、

盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整