盒子模型有两种模式分别为标准盒模型与怪异盒模型
.标准盒模型
标准的盒模型的组成
content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）+content：元素的宽和高
border : 盒子的边缘
下面我们看一下标准盒模型的具体表现形式
给盒添加了padding（填充区）+border（边框区）+margin（外边界区）以后，我们会发现盒子被撑大了，也发生了位置偏移，这就是标准盒模型的表现形式。
.怪异盒模型
怪异盒模型的组成
元素的宽度：width（content+border+padding）+margin
属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）
我们发现同样大小的盒子，标准盒模型添加了border(边框) padding（内边距）以后内容区域被撑大了，怪异盒模型内容区减小了。
怪异盒模型的属性
box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）
我们可以通过怪异盒模型属性将标准盒模型变为怪异盒模型，也可以把怪异盒模型变为标准盒模型。
CD 逆战班：李伟
来源：CSDN
作者：live丶
链接：https://blog.csdn.net/lIvecdsc/article/details/104598771