标准盒子模型、怪异盒子模型介绍。

盒子模型是用来描述网页布局的概念，它将网页中的元素看做是一个矩形盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分组成。但是在不同的浏览器中，盒子模型的实现方式是不同的，主要有标准盒子模型和怪异盒子模型两种。

标准盒子模型

标准盒子模型是W3C规范所定义的盒子模型，也是大多数浏览器所采用的盒子模型。在标准盒子模型中，元素的尺寸由内容(content)、内边距(padding)和边框(border)三部分组成，而外边距(margin)不计入元素的尺寸范围内。具体来说，元素的宽度和高度分别等于内容(content)、内边距(padding)和边框(border)这三部分的宽度和高度之和。例如，一个元素的CSS样式为：

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
}

那么这个元素的实际宽度和高度为：

• 宽度：100px + 10px(padding-left) + 10px(padding-right) + 1px(border-left) + 1px(border-right) = 122px

• 高度：100px + 10px(padding-top) + 10px(padding-bottom) + 1px(border-top) + 1px(border-bottom) = 122px

怪异盒子模型

怪异盒子模型又称为IE盒子模型，是IE5及以下版本所采用的盒子模型。在怪异盒子模型中，元素的尺寸由内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分组成。具体来说，元素的宽度和高度等于内容(content)、内边距(padding)、边框(border)和外边距(margin)这四部分的宽度和高度之和。例如，一个元素的CSS样式为：

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
}

那么这个元素的实际宽度和高度为：

• 宽度：100px

• 高度：100px在怪异盒子模型中，元素的实际宽度和高度并不包括内边距(padding)、边框(border)和外边距(margin)这三部分的宽度和高度，并且元素的内容(content)会被压缩，以适应元素的实际宽度和高度。

总结

标准盒子模型和怪异盒子模型是两种不同的盒子模型实现方式，它们的区别在于元素的尺寸计算方式不同，主要表现在是否包括外边距(margin)这一部分。在实际开发中，为了避免盒子模型的兼容性问题，我们通常会在CSS样式中明确指定盒子模型的实现方式，例如：

* 使用标准盒子模型 */
box-sizing: content-box;
/* 使用怪异盒子模型 */
box-sizing: border-box;