详解CSS 怪异盒模型和标准盒模型

盒模型基础知识

CSS的盒模型是用来解释HTML文档中元素的布局的基本概念。任何元素都被认为是一个盒子，盒子由四个部分组成：外边距(margin)、边框(border)、内边距(padding)和内容(content)。

盒子的宽度和高度是由这四个部分的大小及其组成顺序来定义的。

在CSS标准之前，盒模型存在两种不同的模型，它们分别是怪异盒模型和标准盒模型。

怪异盒模型

怪异盒模型（quirks mode）是指在旧版本的浏览器中呈现的盒模型。在这个模型中，盒子的宽度和高度不仅包括内容、内边距和边框，还包括外边距。

怪异盒模型的优点是简单易懂，在早期的网页制作中使用较为广泛。但是，由于怪异盒模型的存在，当我们改变元素的边框、外边距等属性时，会影响到元素的实际宽度和高度，造成了很多问题。

标准盒模型

在CSS标准之后，W3C提出了新的标准盒模型。在标准盒模型中，盒子的宽度和高度只包括内容、内边距和边框，不包括外边距。

这种方式更符合人们的直观感受，也更便于布局和计算元素的大小。

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
}

在标准盒模型中，上述样式中的盒子宽度是 100+2*10+2*1 = 122px，高度是 100+2*10+2*1 = 122px，而在怪异盒模型中，宽度和高度都是 100+2*10+2*1+2*20 = 172px。

如何切换盒模型

我们可以使用CSS的box-sizing属性来切换盒模型。

• box-sizing: content-box;表示使用标准盒模型，即默认盒子大小只包括内容。
• box-sizing: border-box;表示使用怪异盒模型，即盒子大小包括内容、内边距、边框和外边距。

以下是两个示例：

示例1

div {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid #f00;
  margin: 50px;
  box-sizing: content-box;
}

在此示例中，box-sizing: content-box，表示使用标准盒模型，因此盒子的宽度和高度分别是 200+2*20+2*10 = 260px。

示例2

div {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid #f00;
  margin: 50px;
  box-sizing: border-box;
}

在此示例中，box-sizing: border-box，表示使用怪异盒模型，因此盒子的宽度和高度分别都是 200px。

这两个示例可以在浏览器中通过调试工具查看盒子的大小来进行验证。

结论

CSS的盒模型是前端开发中非常重要的基础知识。掌握盒模型的概念和使用方法，能够更好地进行网页布局和调试。在盒模型中，我们常用的是标准盒模型，但是也需要清楚地知道怪异盒模型，并根据需要进行切换。