设为 border-box 后 width/height 即最终渲染尺寸，padding 和 border 在其内部计算，避免 content-box 下的额外累加；推荐全局设置 、::before、*::after 的 box-sizing 为 border-box。
直接把盒模型设成 border-box，就能让 width 和 height 指的就是最终渲染出来的尺寸，边框和内边距不再往外撑，计算立刻变直观。
为什么 border-box 能简化计算
默认的 content-box 模式下，设置 width: 300px; padding: 10px; border: 2px solid;，元素实际占宽是 300 + 10×2 + 2×2 = 324px——padding 和 border 都额外加在 width 外面，容易漏算、难预估。
换成 border-box 后，同样写法，元素总宽就是 300px，padding 和 border 从这 300px 里“扣着用”，不用再心算累加。
全局启用 border-box 的推荐写法
在 CSS 开头加这一段，一劳永逸：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after { box-sizing: border-box; }它覆盖所有元素（包括伪元素），避免个别标签意外退回 content-box。这是现代前端项目的标准起步配置。
哪些情况仍要留意
- 第三方组件或重置样式（如 normalize.css）可能没设 box-sizing，建议检查并补上全局规则
- 内联样式或 JS 动态设置 width 时，只要没显式覆盖 box-sizing，就仍按 border-box 生效
- 表格单元格（
td、th）在某些旧浏览器中 box-sizing 表现不一致，如需精确控制，可单独加声明
基本上就这些——设好全局 border-box，宽度计算就回归直觉，不用再边写边拿计算器按了。
