CSS盒模型只有标准盒模型和IE盒模型两种，标准模型中width/height仅指内容区，总宽=content+padding+border；IE模型中width/height包含content、padding和border，内容区自动收缩；通过box-sizing属性切换：content-box为标准模型，border-box为IE模型。
CSS盒模型本质上只有两种：标准盒模型（W3C盒模型）和IE盒模型（又称“怪异盒模型”或“替代盒模型”）。它们不是并列的多个模型，而是同一套盒概念下的两种不同尺寸计算逻辑。
标准盒模型：width/height只管内容区
这是现代CSS的默认行为。当你写 width: 200px; padding: 10px; border: 5px solid; 时：
- 内容区（content）宽度 = 200px
- 内边距（padding）和边框（border）额外增加
- 元素实际占据的总宽度 = 200 + 10×2 + 5×2 = 230px
IE盒模型：width/height管到边框边缘
这是旧版IE（如IE5.5–6）在怪异模式下的行为，现在可通过 box-sizing: border-box 主动启用：
- 设置
width: 200px表示整个盒子（content + padding + border）总宽就是200px - 内容区会自动收缩，以腾出 padding 和 border 的空间
- 更符合直观设计预期，尤其做等宽布局时不易溢出
如何切换盒模型？关键看 box-sizing
box-sizing 是控制盒模型行为的唯一CSS属性：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: content-box—— 标准盒模型（浏览器默认值） -
box-sizing: border-box—— IE盒模型语义 - 可作用于单个元素，也可全局重置（例如：
* { box-sizing: border-box; }）
为什么容易混淆？历史与模式有关
早期浏览器渲染不统一，IE在“怪异模式”（触发条件如缺少DOCTYPE声明）下自动启用IE盒模型；而标准模式下，现代浏览器始终遵循W3C规范。如今已无真实“IE模式”，但box-sizing: border-box保留了其计算逻辑，成为响应式开发的事实标准。
