面试题：CSS中盒模型的组成及如何计算宽度

Question

请阐述CSS盒模型由哪些部分组成，并且说明在标准盒模型和怪异盒模型下，元素宽度是如何计算的？

Answer 1

CSS盒模型组成部分

CSS盒模型由以下四个部分组成：

1. 内容区域（content）：元素的实际内容，例如文本、图像等。
2. 内边距（padding）：内容与边框之间的空间，透明且可设置背景颜色。
3. 边框（border）：围绕内边距和内容的线，可设置样式、宽度和颜色。
4. 外边距（margin）：元素边框与相邻元素之间的空间，透明且不可设置背景颜色。

标准盒模型下元素宽度计算

在标准盒模型（也称为W3C盒模型）中，元素的宽度（width）仅指内容区域的宽度。如果要计算整个元素占据的水平空间，计算公式为：

元素总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right

怪异盒模型下元素宽度计算

在怪异盒模型（也称为IE盒模型）中，元素的宽度（width）包括了内容区域、内边距和边框的宽度。即：

width = 内容宽度 + padding-left + padding-right + border-left-width + border-right-width

计算整个元素占据的水平空间时，计算公式为：

元素总宽度 = width + margin-left + margin-right