border-box使width包含padding和border，content-box仅指内容宽；改用border-box后元素“变小”因内容区自动收缩；全局设置需避开表单控件，推荐继承写法或局部应用。
box-sizing: content-box 和 border-box 的计算差异
标准模式（content-box）下，设置的 width 仅指内容区宽度，加上 padding 和 border 后，元素实际占位会变宽；替代模式（border-box）则把 padding 和 border 包含在 width 内，设定多少就是最终宽度。
为什么改用 border-box 后元素突然“变小”了
常见于重置样式后未显式声明 box-sizing，或父容器用了 border-box 而子元素沿用默认 content-box。此时若子元素设置了 width: 100% + padding: 10px，实际宽度 = 100% + 20px，可能溢出父容器。
-
border-box下：width: 100%已含 padding 和 border，内容区自动收缩 -
content-box下：width: 100%是纯内容宽，padding 和 border 额外加在外部 - 浏览器默认所有元素都是
content-box，不写box-sizing就是它
全局启用 border-box 的安全写法
直接给 * 设 box-sizing: border-box 有隐患——表单控件（如 input[type="search"]、textarea）在某些浏览器中内部渲染依赖 content-box，强行覆盖可能导致文字截断或光标错位。
- 推荐用
*::before, *::after继承写法，避免影响原生控件： * { box-sizing: border-box; } *::before, *::after { box-sizing: inherit; }- 更稳妥的做法是只对布局容器（如
.container、.card）显式设box-sizing: border-box
box-sizing 对 calc() 和百分比宽度的影响
当配合 calc() 使用时，box-sizing 不改变计算逻辑，但会影响结果是否“如预期”。例如 width: calc(100% - 20px) 在 content-box 下仍会因 padding 多出空间；而 border-box 下该值就是最终总宽，更易控制。
立即学习“前端免费学习笔记（深入）”；
-
border-box让width更接近“视觉宽度”，适合栅格系统和响应式布局 -
content-box在需要精确控制内容区域尺寸时仍有价值（比如等宽字体排版、canvas 容器） - 注意：
box-sizing不影响height的计算方式，规则完全对称
实际项目里最容易忽略的是表单元素的兼容表现，尤其是 Safari 对 input[type="number"] 的内边距处理，改 box-sizing 前务必真机测试。
