calc()能减少百分比宽度像素误差，因其将理想比例与固定开销分离计算，误差仅发生在最后除法步骤而不叠加；有效写法为width: calc((100% - 2px) / 3)，需配合box-sizing: border-box，现代布局推荐使用flex或grid。
calc() 为什么能减少百分比宽度的像素误差
浏览器把 width: 33.33% 转成像素时，会四舍五入到最近整数（比如 300px × 33.33% = 99.99px → 渲染为 100px），但多个元素各自 rounding 后再加总，误差就累积了。而 calc() 把“理想比例”和“已知固定开销”分开算：先用 100% - 2px 得到净可用宽度，再除以列数，误差只发生在最后一步除法，不会叠加。
怎么写 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-*类可能重置了它） - 建议用通配符一次性覆盖：
*, *::before, *::after { box-sizing: border-box; }
现代项目里还值得为 float + 百分比精度折腾吗
不值得。除极少数需要兼容 IE8 的遗留系统，float 布局已无必要坚持。
-
flex中flex: 1或flex: 0 0 33.333333%由浏览器内部调度分配，不暴露像素级舍入过程 -
grid用grid-template-columns: repeat(3, 1fr)，等分逻辑在布局引擎层完成，和像素精度无关 -
fr单位天然规避百分比舍入链，IE 不支持才退回到带容错机制的calc方案
真正难的不是写出某个百分比值，而是确认所有相关项是否共享同一套计算源头——比如栅格列宽、内边距、边框都从同一个 $grid-unit 推导，否则再精确的单个值也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
