content-box 是默认盒模型，适用于 width/height 必须严格等于内容区尺寸的场景，如 JS 精确测量、像素级 UI 原型或与旧系统耦合；其“叠加式”尺寸易致溢出，响应式中易失控。
content-box 是默认盒模型，适合需要“内容区域尺寸绝对固定”的场景，比如精确排版图标、文字块或配合 JavaScript 动态计算尺寸的 UI 组件。
什么时候必须用 content-box？
当你依赖 width 和 height 严格等于内容区大小时，就不能改用 border-box。典型场景包括：
- 用 JS 测量元素真实内容宽高（如
element.clientWidth在content-box下 =width+padding，但若你只关心纯内容尺寸，content-box更直观） - 设计像素级对齐的 UI 原型（比如 SVG 容器、CSS Grid 轨道基准单元），要求 padding/border 不参与尺寸定义
- 与旧系统或第三方库（如某些 Canvas 渲染逻辑、图表库坐标映射）耦合，它们假设 width/height 指代内容区
为什么 content-box 在响应式中容易失控？
因为它的尺寸是“叠加式”的：加一点 padding 或 border，实际占位就变大。例如：
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
box-sizing: content-box; /* 默认 */
}此时卡片总宽度 = 300px + 32px + 2px = 334px —— 如果父容器刚好 width: 300px，它就会溢出。这种“隐性膨胀”在嵌套卡片、栅格列或 flex 项目中极易引发换行错位。
立即学习“前端免费学习笔记（深入）”；
哪些情况会误踩 content-box 的坑？
常见错误不是主动选它，而是忘了全局重置，导致部分组件行为不一致：
- 写了一个
.btn { width: 120px; padding: 8px; }，结果按钮比预期宽了 16px，和旁边border-box的输入框高度对不齐 - 媒体查询里只调了
padding，没同步调整width，小屏下卡片直接撑破容器 - 用
max-width: 100%包裹图片时，父容器若为content-box且含padding，图片仍可能溢出（因max-width只限制内容区）
真正需要 content-box 的地方其实很少；绝大多数现代布局（卡片、表单、响应式容器）都该用 border-box。保留 content-box 的唯一合理理由，是你要和某个不可控的底层尺寸逻辑对齐——否则，它只是历史包袱，不是设计优势。
