标准盒模型和怪异盒模型的区别

盒子模型有两种模式分别为标准盒模型与怪异盒模型

.标准盒模型

标准的盒模型的组成
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 逆战班：李伟