box-sizing: border-box 是控制尺寸精度的关键，它使 width/height 包含内容、内边距和边框；需全局设置并配合显式声明 padding/border、谨慎使用 calc()，最后通过 DevTools 和 getBoundingClientRect() 实测验证。
box-sizing: border-box 是控制尺寸精度的关键
默认情况下，width 和 height 只作用于内容区，边框和内边距会额外增加总尺寸。这意味着设 width: 200px + padding: 10px + border: 2px，实际占位是 224px，极易导致布局错位或响应式失效。
解决方法就是统一使用 box-sizing: border-box，让 width 和 height 包含内容、内边距和边框：
*, *::before, *::after {
box-sizing: border-box;
}这是现代 CSS 布局的起点，不是可选项。漏掉这一条，后续所有尺寸计算都可能失准。
padding 和 border 的像素级影响必须显式声明
即使启用了 box-sizing: border-box，如果 padding 或 border 的值依赖浏览器默认（比如某些重置不彻底时），仍会导致跨浏览器尺寸差异。尤其在需要像素级对齐的卡片、表单控件或网格项中，必须明确写出数值。
立即学习“前端免费学习笔记（深入）”；
-
border要写全三元组：border: 1px solid #ccc，避免只写border: 1px（颜色/样式可能继承异常） -
padding推荐用数值而非em或rem，除非你明确控制了父元素字体大小且无缩放干扰 - 零值也要写清楚：
padding: 0比padding: 0px更安全，但两者都比留空强
width: calc() 在动态场景下容易出错的位置
当需要用 calc() 扣除边框或内边距时（例如：希望内容区刚好填满容器减去两侧 2px 边框），常见错误是单位混用或括号缺失：
.container {
width: calc(100% - 4px); /* ✅ 正确：两边各 2px 边框 */
border: 2px solid #000;
}这些写法会失效：
-
width: calc(100% - 2px * 2)—— 运算符前后缺少空格，部分旧版浏览器不识别 -
width: calc(100% - 2px)—— 忘记乘以 2，只扣了一侧边框 -
width: calc(100vw - 4px)—— 若父容器有滚动条，100vw会包含滚动条宽度，造成意外溢出
检查尺寸是否真的“精确”的三个实操动作
光靠代码写对还不够，必须验证渲染结果：
- 在 Chrome DevTools 中选中元素，看右侧面板的 Computed 标签页里
width、padding、border是否为你写的值（注意：有些值显示为auto或计算后数字，要展开确认） - 启用
box-sizing可视化：在 DevTools 的 Styles 面板中右键任意样式 → Break on attribute modification → 修改box-sizing观察是否触发重排 - 用
getBoundingClientRect()在控制台手动测真实像素：console.log(document.querySelector('.my-el').getBoundingClientRect().width);—— 这个值才是浏览器最终渲染的宽度，比 CSS 声明更权威
很多“明明写了 300px 却显示 302px”的问题，根源不在 CSS 写错，而在父容器缩放、字体抗锯齿、或者 subpixel 渲染导致的四舍五入——这些只有运行时测量才能暴露。
