CSS盒模型是什么？标准盒模型和怪异盒模型区别？

你可以把HTML里的每个元素都想象成一个套着的盒子，这就是盒模型。它决定了元素在页面上占多大地方，由里到外分别是：内容区、内边距、边框、外边距。理解这个，是搞定CSS布局的第一步。

这两种模型最根本的区别，在于“宽度”到底算的是什么。在W3C的标准盒模型里，你设置的width和height属性，仅仅是指内容区域的尺寸。实际的元素总宽度，得把内容宽加上左右内边距和边框的宽度。

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #ccc;
}

按照标准模型，这个盒子的总宽度是 200 + 202 + 52 = 250px。

而怪异盒模型（也叫IE盒模型）的算法就直观多了。你设置的width，直接就等于这个盒子的总宽度，也就是内容区、内边距和边框三者的总和。所以，如果你设置了width: 200px，那么内容区的实际宽度会自动减去padding和border的值。

好在HTML5的现代开发环境下，我们可以用box-sizing这个属性来控制用哪种模型。content-box对应标准模型，border-box对应怪异模型。现在大家更偏爱border-box，因为它计算起来方便多了，布局也更容易控制。

* {
  box-sizing: border-box; /* 推荐全局设置 */
}

早年IE浏览器在怪异模式下默认使用怪异盒模型，这让跨浏览器兼容成了很多老前端的噩梦。现在你知道了，用box-sizing: border-box就能让所有元素采用统一的、更符合直觉的尺寸计算方式，这是写出稳定布局的一个小秘诀。