加padding、border后盒子被撑大的解决方法

加上padding和border后盒子被撑大了怎么解决？

关于盒子被撑大，这就要涉及到盒子模型的知识了，一个盒子由内容、padding、border和margin组成，导致盒子被撑大的主要原因就于padding和border了。

这里有两种解决办法

一、修改盒子的宽高给多少的padding和border值就减去多少的盒子长度，可以解决撑大盒子问题，不过这个方法不太推荐。

 

二、给盒子添加一条属性可以完美解决盒子撑大问题  “box-sizing”

.box {
  box-sizing: border-box;
  padding   : 0 20px;
  width     : 780px;
  height    : 355px;
  background: #f2f1ef;
}