标准盒模型与 IE 盒模型

content-box 将 width 解释为内容区宽度，border-box 将它解释为内容、内边距和边框的总宽度。现代项目常在全局基础规则中使用 border-box，但理解两种模型仍然是维护旧 CSS 和计算溢出的必要条件。

*, *::before, *::after { box-sizing: border-box; }
.content { box-sizing: content-box; width: 200px; padding: 20px; }
.panel { box-sizing: border-box; width: 200px; padding: 20px; }

上例中 .content 的内容宽度仍为 200px，总宽度是 240px；.panel 的总宽度保持 200px，内容区会扣除 padding 和 border。box-sizing 不改变 margin，也不自动解决子元素最小尺寸和溢出。

实验与练习

给两个相同元素分别设置 content-box 和 border-box，用 getBoundingClientRect().width 与 Computed 面板比较结果。再给内容加入不可断开的长字符串，说明盒模型正确时仍可能发生溢出的原因。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 把 border-box 理解成“所有内容永远不会溢出”。
• 只给元素设置 box-sizing，却忘记伪元素。
• 修改盒模型后仍按旧的内容区宽度估算文本换行。

继续阅读

盒子之间的垂直距离还可能发生折叠，下一篇处理外边距折叠：外边距折叠。

练习

1. 用最小输入复现“标准盒模型与 IE 盒模型”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案