盒子模型（标准和非标准）

首先，说一下盒子模型的定义：盒子顾名思义，就像是生活中我们用来盛放东西的盒子，而HTML中的盒子模型是用来放HTML元素的盒子。

前端中又把盒子模型分为标准盒子模型和非标准盒子模型（变态盒子模型）

首先说一下标准盒子模型给大家看一张图可能会明白一点

对于标准的盒子模型来说我们设置的高度宽度是content的宽高，如果增加它的border、padding、margin都会改变这个盒子实际的占用空间，而且在盒子模型中，margin的四个方向的属性和padding的四个属性谨慎使用

非标准盒子模型：首先要把盒子模型变成非盒子模型：box-sizing :border-box；

在非标准盒子模型中我们多设置的宽高是对border+padding+content这三者的，只有在改变margin四个属性的时候才会改变整个盒子所占用的空间的实际大小，