box-sizing: content-box 是浏览器默认盒模型，width/height 仅控制内容区尺寸，padding 和 border 向外叠加，实际总宽 = width + 左右 padding + 左右 border + 左右 margin，易导致布局溢出、换行等错位问题。
现代浏览器默认采用 content-box 盒模型。
这和设计稿还原、团队协作、跨浏览器一致性等实际开发需求无关——它只是规范定义的初始值，所有符合 CSS3 标准的浏览器（Chrome、Firefox、Safari、Edge）在未显式设置 box-sizing 时，都会按此行为渲染。
box-sizing: content-box 是什么效果？
-
width和height只控制内容区域尺寸 -
padding和border会额外向外叠加，增大元素总占位 - 公式：实际总宽 =
width+ 左右padding+ 左右border+ 左右margin
常见错误现象：
- 写了
width: 100%+padding: 16px，结果子元素撑破父容器 - Flex/Grid 容器里放几个
div { width: 33.33% }，加了padding后换行或溢出 - 用
calc(100% - 40px)减去边框/内边距，却忘了当前是content-box，导致重复扣除
为什么项目里几乎都写 box-sizing: border-box？
这不是浏览器变了，而是开发者主动覆盖默认行为。原因很实际：
立即学习“前端免费学习笔记（深入）”；
- UI 设计稿标注的「宽度」永远是外框尺寸（含 padding + border），
border-box直接对齐 - 不用每次写
padding都反向手算内容区该缩多少 - 避免因框架、第三方组件、重置样式不一致导致局部盒模型混乱
注意：全局写 * { box-sizing: border-box } 会影响 <textarea></textarea>、<select></select> 等原生控件，默认尺寸可能被压缩。更稳妥的写法是：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
calc() 和 box-sizing 怎么共存？
calc() 计算的是最终生效的 width 值，发生在 box-sizing 解析之后。
也就是说：
-
width: calc(200px - 20px); box-sizing: border-box→ 总宽 = 180px（内容 + padding + border 全部塞进 180px） - 同样
calc()值配content-box→ 内容区宽 180px，总宽还要再加 padding + border
别在 border-box 下还用 calc() 手动减去 padding/border，这是典型重复计算。
真正容易被忽略的点：伪元素（::before / ::after）是独立渲染节点，不继承父元素的 box-sizing，除非显式设为 inherit 或全局覆盖。漏掉它们，有时会让图标、装饰块尺寸错乱，尤其在按钮、卡片等高频复用组件里。
