【CSS】标准盒模型和怪异盒模型

盒模型的组成：

• content（内容）
• padding（内边距）
• border（边框）
• margin（外边距）

那常见的盒子模型有哪些呢？

主要是两种：标准盒模型和怪异盒模型。

它俩有什么区别呢？区别主要在于宽高的计算。

1、标准盒模型

如上图，我们可以很明显的看到这里的宽高就是content的宽高。 

宽：width = content（内容）的宽

高：height = content（内容）的高

2、怪异盒模型（IE盒模型）

如图所示，怪异盒模型的宽高是包括了content、padding和border的。

宽：width = content（内容）的宽 + padding-left （左内边距）+ padding-right （右内边距）+ border-left（左边框） + border-right（右边框）

高：height = content（内容）的高 + padding-top （上内边距）+ padding-bottom（下内边距）+ border-top（上边框） + border-bottom（下边框）

在大多数情况下我们用到的都是标准盒模型，当然盒子模型之间也是可以相互转换的。

在这里，就要用到box-sizing这个属性了。

• content-box 标准盒模型
• border-box 怪异盒模型