问题

• 请简述 CSS 盒模型。
• 盒模型有哪些类型？有什么区别？

MDN

CSS 盒模型

CSS盒模型是样式中相当重要的一个概念，页面中的每个元素都是一个盒子。当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分组成，如图，与盒子的四个组成区域相对应，每个盒子有四个边界：

• 内容边界（Content Edge），box-sizing 为 content-box（默认）
• 内边距边界（Padding Edge）
• 边框边界（Border Edge）
• 外边距边界（Margin Edge）

下面放两张图（一图胜千言）

警告

外边距可以发生重叠，且可以为负值。

CSS 盒模型类型

在CSS中，盒模型有两种类型：标准盒模型（W3C盒模型）和IE盒模型（怪异模式盒模型）。两者的主要区别在于宽度和高度的计算方式不同。

标准盒模型（也称为W3C盒模型）： 在标准盒模型中，元素的width和height属性只包括内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。如果你给一个元素设置了width和height，这将只应用到内容区域，而内边距和边框则会额外添加到这个尺寸上，导致元素的总尺寸大于设置的width和height。

IE盒模型（也称为怪异模式盒模型）： 在IE盒模型中，元素的width和height属性包含了内容区域、内边距和边框，但不包括外边距。这意味着，设置元素的width和height将会得到包含内容、内边距和边框的总尺寸，这与标准盒模型不同。

为了解决这个差异并让开发者能够自由选择使用哪种盒模型，CSS3引入了box-sizing属性。box-sizing属性有两个常用值：

• content-box：应用标准盒模型，width和height只包括内容区域。
• border-box：应用IE盒模型，width和height包括内容区域、内边距和边框。

通常，使用 border-box 可以让布局的计算更简单，因为你可以为元素直接设置最终大小，而不用担心内边距和边框会改变元素的总尺寸。因此，许多现代CSS框架和样式重置（reset）会将全局box-sizing设置为border-box。