calc()能减少百分比宽度像素误差，因其将固定开销（如边框）从100%中先扣除再等分，使四舍五入误差仅发生一次；有效写法为width: calc((100% - 2px) / 3)，需配合box-sizing: border-box且注意ie9+空格兼容性。
calc() 为什么能减少百分比宽度的像素误差
浏览器把 width: 33.33% 转成像素时，会四舍五入到最近的整数（比如 300px × 33.33% = 99.99px → 渲染为 100px），但多个元素叠加后，误差就累积了。而 calc() 把“理想比例”和“已知固定开销”分开算，相当于把误差锁在单个值里，而不是每个子元素各自 rounding 一次再加总。
怎么写 calc 才真正有效：避开常见无效写法
无效写法会直接被浏览器忽略，看起来没报错，但 computed width 还是原始百分比值：
-
width: calc(100% / 3)—— 本质还是纯百分比除法，精度丢失照旧 -
width: calc(calc(100% / 3) - 2px)—— 嵌套calc，多数浏览器不支持，声明失效 -
width: calc(33.333333% - 1px)—— 看似合理，但 33.333333% 本身已是近似值，减 1px 后反而可能更不准
推荐写法（以三列、左右各 1px 边框、中间无间隙为例）：
width: calc((100% - 2px) / 3);
这里 2px 是明确已知的总边框宽度（左+右），100% - 2px 先算出可分配净宽，再等分，误差只发生在最后一步除法。
box-sizing: border-box 是 calc 起效的前提
如果元素用了默认的 box-sizing: content-box，那 width: calc((100% - 2px) / 3) 只控制内容区，加上 padding 和 border 仍会撑出父容器。必须确保：
- 全局或局部设
box-sizing: border-box - 检查是否被第三方样式覆盖（比如 Bootstrap 的
.col-*类可能重置了它） - IE8 需补
-ms-box-sizing: border-box，且必须写在标准属性前面
调试时打开 DevTools → Elements → 查看 Styles 面板中 box-sizing 是否被划掉；若被覆盖，临时加 !important 快速验证，但上线前要定位并移除冲突源。
别忘了 calc 在老环境下的兼容性断点
calc() 在 IE9+、Android 4.4+ WebView 支持良好，但要注意：
- IE9 要求
calc内部有空格：calc(100% - 2px)✅，calc(100%-2px)❌ - 某些旧版安卓 WebView（如 Android 4.1）对除法支持不稳定，优先用减法形式：
calc(33.333333% - 1px)比calc((100% - 2px) / 3)更稳妥 - 如果页面已用
float且需兼容 IE11 或老 WebView，强行修 float + calc 得不偿失——此时改用display: flex或display: grid是更干净的解法
真正容易被忽略的不是怎么写 calc，而是：光看页面没换行，不代表 calc 生效了——可能只是当前父容器宽度恰好躲过了临界点。务必用 DevTools 的 Layout 面板对比 computed width 和实际渲染尺寸，才能确认误差是否真被控住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
