box-sizing: content-box 是浏览器默认模式，width 仅控制内容区尺寸，导致 padding 和 border 额外增加总宽而溢出；其合理场景包括 Canvas/SVG 容器、文本高亮、GSAP 动画基准及老项目维护。
是的，box-sizing: content-box 就是浏览器默认行为，不写 box-sizing 时，所有元素天然就是 content-box 模式。
为什么设了 width 还会撑出父容器？
因为你控制的是内容区尺寸，不是视觉占位尺寸。比如：width: 100% + padding: 20px + border: 2px，在 content-box 下实际宽度 = 100% + 40px + 4px，必然溢出。
- 常见于响应式卡片、表单控件并排布局、Flex 子项加 padding 后换行
- 开发者常误以为“写了 width 就是总宽”，本质是没意识到当前处于
content-box - 用开发者工具检查元素的 Styles 面板，若没看到
box-sizing声明，就等于content-box
哪些场景下 content-box 反而是合理选择？
它不是缺陷，而是特定需求下的可控手段。关键在于“主动用”，而非“不知道自己在用”。
- Canvas 或 SVG 容器：渲染逻辑依赖精确的内容区域尺寸，
width必须指内容画布大小 - 文本高亮或 inline 元素微调：用
padding留白但要求字符宽度严格匹配width - GSAP 动画中以内容区为 transform 基准点时，
content-box更易预测位移起点 - 老项目维护：直接覆盖全局
border-box可能破坏原有尺寸逻辑，需局部保留
如何安全地检测和切换 box-sizing 模式？
别靠猜，用代码确认。JS 获取值是 boxSizing（驼峰），CSS 里是 box-sizing（连字符）。
立即学习“前端免费学习笔记（深入）”；
- 检测：
getComputedStyle(el).boxSizing返回字符串"content-box"或"border-box" - 切换：
el.style.boxSizing = "border-box"，注意 IE8 需补el.style.msBoxSizing - 全局重置推荐写法：
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; }，避免影响<input>、<select></select>等原生控件默认表现 - Flex/Grid 子项不会继承父容器的
box-sizing，必须显式设置，否则flex-basis仍按 content-box 解析
真正容易被忽略的，不是该不该用 border-box，而是当 content-box 出现在表单控件、伪元素或第三方库内部时，它可能悄无声息地覆盖你的重置规则——得一层层 inspect 才能发现哪段 padding 实际上正在悄悄撑开总宽。
