17370845950

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保留了其计算逻辑，成为响应式开发的事实标准。