盒模型

CSS盒子模型

CSS的盒子模型由以下四个关键部分组成：

1. Content（内容）:

   • 这是元素的实际内容，如文本、图片或其他HTML元素。

2. Padding（内边距）:

   • 内边距是在内容和边框之间的空白区域。

3. Border（边框）:

   • 边框围绕在内边距之外。

4. Margin（外边距）:

   • 外边距是边框以外的空白区域，不属于任何元素的组成部分，但可以控制元素间的距离。

标准盒子模型（W3C盒子模型）

在标准盒子模型中，width 和 height 属性仅指定元素的内容区域的宽度和高度。元素的总宽度和高度还包括了 padding 和 border 的宽度。

• 总宽度 = width + padding-left + padding-right + border-left-width + border-right-width
• 总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width

IE盒子模型（也称怪异盒子模型）

在IE盒子模型中，width 和 height 属性不仅包含了内容区域的宽度和高度，还包含了 padding 和 border 的宽度。

• 总宽度 = width（已包含 padding 和 border）
• 总高度 = height（已包含 padding 和 border）

如何转换

从一种盒子模型转换到另一种盒子模型，可以使用CSS3中的 box-sizing 属性。

• content-box: 使用标准盒子模型。
• border-box: 使用IE盒子模型。
• inherit: 继承父元素的 box-sizing 值。

示例

/* 使用标准盒子模型 */
.element {
  box-sizing: content-box;
}

/* 使用IE盒子模型 */
.element {
  box-sizing: border-box;
}