一、盒模型的核心概念

盒模型（Box Model）是W3C制定的网页布局标准，它规定了浏览器如何渲染每个HTML元素——每个元素都会被表示为一个矩形的盒子，这个盒子由4个部分组成，从内到外依次是：

1. 内容区（Content）：元素实际显示内容的区域（文字、图片等），宽度/高度由width/height属性控制。
2. 内边距（Padding）：内容区和边框之间的空白区域，会继承元素的背景色。
3. 边框（Border）：包裹内边距和内容区的线条，有宽度、样式、颜色三个属性。
4. 外边距（Margin）：盒子与其他盒子之间的空白区域，透明且不会影响盒子内部样式。

二、盒模型的两种类型

前端中有两种盒模型，核心区别是width/height属性的计算范围不同：

1. 标准盒模型（W3C盒模型）

这是W3C的标准，也是现代浏览器（Chrome/Firefox/Edge）的默认盒模型。

• 计算规则：
  • 元素总宽度 = width（仅内容区） + padding-left + padding-right + border-left + border-right + margin-left + margin-right
  • 元素总高度 = height（仅内容区） + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
• 示例代码：

/* 标准盒模型（默认） */
.box {
  width: 200px;       /* 内容区宽度 */
  height: 100px;      /* 内容区高度 */
  padding: 10px;      /* 上下左右内边距各10px */
  border: 5px solid #000; /* 上下左右边框各5px */
  margin: 20px;       /* 上下左右外边距各20px */
  /* 总宽度 = 200 + 10*2 + 5*2 + 20*2 = 270px */
  /* 总高度 = 100 + 10*2 + 5*2 + 20*2 = 170px */
}

2. 怪异盒模型（IE盒模型/边框盒模型）

早期IE浏览器的非标准实现，现在可通过CSS属性手动开启，也是日常开发中更常用的模式（布局更直观）。

• 计算规则：
  • 元素总宽度 = width（内容区+内边距+边框） + margin-left + margin-right
  • 元素总高度 = height（内容区+内边距+边框） + margin-top + margin-bottom
• 开启方式：通过box-sizing属性设置
• 示例代码：

/* 怪异盒模型（边框盒） */
.box {
  box-sizing: border-box; /* 核心属性，开启怪异盒模型 */
  width: 200px;           /* 包含：内容区+padding+border */
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
  /* 内容区实际宽度 = 200 - 10*2 - 5*2 = 170px */
  /* 内容区实际高度 = 100 - 10*2 - 5*2 = 70px */
  /* 元素总宽度 = 200 + 20*2 = 240px */
}

三、关键属性：box-sizing

box-sizing是控制盒模型类型的核心属性，有两个常用值：

• content-box：默认值，标准盒模型，width/height仅包含内容区。
• border-box：怪异盒模型，width/height包含内容区+内边距+边框（开发首选）。

开发建议： 日常开发中，建议给所有元素统一设置border-box，避免布局时反复计算尺寸：

/* 全局开启怪异盒模型（推荐） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

四、常见误区

1. margin折叠问题：垂直方向上，两个相邻元素的margin会取最大值（而非相加），比如一个元素margin-bottom: 20px，下一个元素margin-top: 30px，实际间距是30px（不是50px）。
2. 行内元素的盒模型：行内元素（如<span>、<a>）的width/height属性无效，margin仅左右生效、上下不生效，padding上下生效但不会撑开父元素高度。
3. 百分比尺寸：当width设为百分比时，标准盒模型的百分比基于父元素内容区宽度，怪异盒模型同理（但包含padding和border）。

总结

1. 盒模型是前端布局的基础，每个元素都是由内容区、内边距、边框、外边距组成的矩形盒子。
2. 盒模型分两种：默认的标准盒模型（width仅包含内容区）和更实用的怪异盒模型（width包含内容+padding+border），可通过box-sizing: border-box开启。
3. 开发中建议全局设置border-box，能大幅简化尺寸计算，避免布局偏差。