box-sizing: border-box 是尺寸控制的起点，全局重置为 border-box 可避免 padding 和 border 导致的宽度溢出，需包含伪元素并注意特殊控件兼容性，显式声明 padding/border 并验证渲染像素值。
box-sizing: border-box 是尺寸控制的起点，不是可选项
你写的 width: 200px 就该是 200px，不多不少——这是 border-box 的核心承诺。默认的 content-box 模式下，padding 和 border 是“额外加塞”的，导致实际宽度变成 200 + 2×padding + 2×border-width，布局错位、栅格塌陷、响应式断点失效，八成由此而起。
- 全局重置是最稳妥的做法：
* { box-sizing: border-box; }或更严谨地包含伪元素：*, *::before, *::after { box-sizing: border-box; } - 漏掉
*::before和*::after可能导致某些 CSS 生成内容（如::after { content: "•" }）仍走content-box，悄悄破坏尺寸 - 极少数原生控件（如
input[type="search"]在旧版 Safari 中）对border-box表现异常，若遇到渲染异常，可单独重置：input[type="search"] { box-sizing: content-box; }
padding 和 border 必须显式声明，不能靠“默认”或继承
启用 border-box 后，width 虽然“包进去了”，但若 padding 或 border 值来自浏览器默认样式或未重置的继承链，跨浏览器尺寸仍可能不一致——尤其在卡片、表单、网格项中，1px 偏差就足以让两栏换行或对齐错位。
-
border必须写全三元组：border: 1px solid #ccc，避免只写border: 1px（颜色和样式可能从父级意外继承） -
padding推荐用像素值（如padding: 12px 16px），除非你明确控制了根字体大小且无缩放干扰；padding: 0比padding: 0px更安全，但两者都比留空强 - 零值也要写清楚：不写
border，不代表没边框——某些 UA 样式或框架会注入默认边框，主动写border: none或border: 0才算真正关闭
calc() 扣减边框时单位与空格是硬性语法要求
当你需要“内容区刚好填满减去边框后的空间”（比如 modal 内容区避开两侧 2px 边框），calc() 很常用，但写错一个空格或括号，整条规则就静默失效。
- ✅ 正确：
width: calc(100% - 4px); /* 两边各 2px 边框 */
- ❌ 常见错误：
—calc(100% - 2px * 2)：运算符前后缺空格，部分旧版浏览器不识别
—calc(100% - 2px)：只扣一侧，漏乘 2
—calc(100vw - 4px)：若页面有滚动条，100vw包含滚动条宽度，造成右侧溢出 - 更安全的替代：直接设
width: 100%+box-sizing: border-box+ 显式border，让浏览器自动压缩内容区，比手算更可靠
验证尺寸是否真的“精确”，不能只看代码
写对了不等于渲染对了。必须实测三个关键位置：
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的 Computed 面板里展开
width、padding、border-width，确认它们是你写的值（注意：有些显示为auto或计算后数字，要点击展开看原始来源） - 右键 Styles 面板任意样式 → Break on attribute modification → 修改
box-sizing，观察是否触发重排——这是检验它是否生效的最直接方式 - 在控制台运行：
console.log(document.querySelector('.my-el').getBoundingClientRect().width);返回的是真实渲染像素，不受缩放、DPR、字体度量等干扰，是最终裁决依据
盒模型本身不复杂，但它的影响是系统性的：一个没重置的 button、一段被继承的 padding、一次没验证的 calc()，都可能让整个栅格系统偏移 2px——这种偏差不会报错，只会让你花半天时间排查“为什么这列突然换行了”。
