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

在 CSS 中，标准盒模型和怪异盒模型是两种不同的盒子模型计算方式，主要区别如下：

 

一、标准盒模型（content-box）

 

1. 定义与组成

 

- 标准盒模型是 CSS 中默认的盒模型。

- 它由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。

2. 宽度和高度的计算

 

- 元素设置的宽度（width）仅指内容区域的宽度。

- 元素设置的高度（height）仅指内容区域的高度。

3. 空间计算示例

 

- 假设一个 <div> 元素，样式设置为： width: 200px; height: 100px; padding: 20px; border: 10px solid black; margin: 10px; 

- 内容区域的宽度为 200px。

- 内边距在内容区域的四周，左右内边距各 20px，所以加上内边距后，水平方向的宽度变为 200 + 20×2 = 240px。

- 边框宽度为左右各 10px，此时整个盒子在水平方向的宽度变为 240 + 10×2 = 260px。

- 外边距在边框之外，左右外边距各 10px，最终该盒子在水平方向占据的总宽度为 260 + 10×2 = 280px。

- 同理，内容区域的高度为 100px，加上上下内边距各 20px，高度变为 100 + 20×2 = 140px，加上上下边框各 10px，高度变为 140 + 10×2 = 160px，再加上上下外边距各 10px，最终在垂直方向占据的总高度为 160 + 10×2 = 180px。

4. 适用场景

 

- 当需要精确控制内容区域的大小，并且希望内边距、边框和外边距不会影响到整体布局时，标准盒模型较为适用。

 

二、怪异盒模型（border-box）

 

1. 定义与特点

 

- 怪异盒模型也被称为 IE 盒模型。

- 其特点是元素的宽度和高度包含了内边距和边框。

2. 宽度和高度的计算

 

- 设置的宽度（width）包括了内容区域、内边距和边框的宽度。

- 设置的高度（height）包括了内容区域、内边距和边框的高度。

3. 空间计算示例

 

- 同样假设一个 <div> 元素，样式设置为： width: 200px; height: 100px; padding: 20px; border: 10px solid black; margin: 10px;  但使用怪异盒模型。

- 因为宽度 200px 已经包含了内边距和边框，所以内容区域的实际宽度为 200 - (20×2 + 10×2) = 140px。

- 高度 100px 已经包含了内边距和边框，所以内容区域的实际高度为 100 - (20×2 + 10×2) = 60px。

- 加上外边距后，水平方向总宽度为 200 + 10×2 = 220px，垂直方向总高度为 100 + 10×2 = 120px。

4. 适用场景

 

- 当需要固定元素所占据的空间，并且希望通过调整内边距和边框来改变内容区域大小时，怪异盒模型更方便。

5. 切换盒模型

 

- 可以通过 CSS 的 box-sizing 属性来切换盒模型。 box-sizing: content-box; 为标准盒模型， box-sizing: border-box; 为怪异盒模型。