box-sizing: border-box 仍偏1px是因为伪元素和表单控件未继承，需全局重置：, ::before, *::after { box-sizing: border-box; }，并覆盖第三方库及处理 SVG、IE 兼容性问题。
为什么 box-sizing: border-box 还是会偏 1px
不是没生效，而是你漏掉了伪元素或表单控件。浏览器里 ::before 和 ::after 默认不继承 box-sizing，input、textarea 在 Safari 和部分 WebView 中也常回退到 content-box。结果就是：DevTools 显示尺寸正常，但 JS 读取 getBoundingClientRect().width 多出 1–2px，或者 Flex/Grid 项边缘对不齐。
必须写全这一条规则，并放在所有 CSS 最顶部：
*, *::before, *::after {
box-sizing: border-box;
}
- 第三方 UI 库（如 Ant Design、Vant）可能用
!important强制设回content-box，得用更具体选择器覆盖，比如input.van-field__control { box-sizing: border-box !important; } - SVG 元素（
<rect>、<circle>）完全不支持box-sizing，它们的尺寸逻辑始终是 content-based，别指望它参与统一计算 - IE8 需要
-ms-box-sizing前缀，但现代项目基本可忽略；PostCSS 的 autoprefixer 会自动补，仅限 IE8–9
fr 轨道宽度不均等，其实是舍入误差
两个 1fr 列看起来宽窄不一，不是 CSS 写错了，是浏览器把小数像素舍入导致的。比如容器宽度是 799.5px，三列 1fr 就可能被算成 266px、266px、267px —— 肉眼就能看出偏差。
- 用开发者工具检查
grid-container的Computed width，确认是否为整数；如果不是，说明父容器本身就被缩放或 rem 换算引入了小数 - 避免混用
px和fr，比如grid-template-columns: 200px 1fr 1fr，改用minmax(200px, 1fr) 1fr 1fr更可控 - 固定侧边栏推荐写法：
grid-template-columns: 200px minmax(0, 1fr)，minmax(0, 1fr)防止内容撑大换行，也减少舍入波动
gap 看起来“没起作用”，其实是空间被吃掉了
gap 不是“额外留白”，而是直接从轨道总宽里扣除的刚性占位。比如 grid-template-columns: 1fr 1fr 1fr + gap: 10px，三列之间有 2 个 gap，总共要从容器宽度里扣掉 20px，再把剩下部分三等分。很多人忘了这点，以为 gap 只是视觉间隔。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否有未被
box-sizing: border-box覆盖的padding或border，它们会进一步压缩可用空间 - 子项上别写
width: 100%或min-width，尤其别设width: 100%—— 它会强制占满轨道，无视gap预留 - 子项含文字时，加
min-width: 0和overflow: hidden，否则长 URL 或中文词组会撑裂轨道，引发隐式宽度偏差
打印预览里 width: 100% 撑出纸张，参照系变了
打印上下文里 width: 100% 的参照物不是视口，而是 @page 的内容区宽度 = 纸张宽 − 左右 @page margin。Chrome 默认 @page margin 是 0.39in（约 1cm），A4 宽 21cm，实际内容区只剩约 19cm。你设的 width: 100% 就按这 19cm 算，再加 padding: 8px 就直接溢出。
- 必须配对使用：
@page { size: A4; margin: 0.4in; }+body { width: 100%; box-sizing: border-box; } -
@media print块内必须显式声明box-sizing: border-box !important，因为打印引擎会重置 UA 样式，全局设置在打印时无效 - 表格类容器要额外加
table-layout: fixed;和width: 100%，否则单元格自动伸缩极易破页
最易被忽略的是：每次改完 @media print 规则后，必须关闭当前打印预览窗口，再按 Ctrl+P 重新唤起 —— 浏览器缓存或样式注入时机可能导致规则未生效。
