百分比宽度在嵌套容器中失真是因每层均按父容器宽四舍五入计算，累积舍入误差；calc()可通过混合固定值提升精度，如width: calc((100% - 2px) / 3)，但Flex/Grid中优先用flex: 1或1fr。
百分比宽度在嵌套容器中为什么会失真
因为百分比是相对于父容器计算的，每层嵌套都会累积舍入误差。比如父容器宽 300px，子元素设 width: 33.33%，浏览器实际可能算出 99.99px；再往下一层用 50%，就变成 49.995px——肉眼可见错位，尤其在栅格、卡片流或表单对齐场景下特别明显。
- 常见错误现象：
display: flex容器里多个width: 33.33%子项加起来不足 100%，留白或换行 - 使用场景：响应式栅格系统、左右分栏（如侧边栏 + 主内容）、多列卡片布局
- 根本原因：CSS 百分比不支持无限精度，渲染引擎会四舍五入到最近的像素（或 subpixel，但 subpixel 渲染行为不一致）
用 calc() 替代纯百分比的关键写法
calc() 能把固定值和百分比混合运算，让浏览器在计算时保留更高精度，且结果更可控。重点不是“用不用”，而是“怎么组合”。
- 避免写
width: calc(100% / 3)—— 这本质还是百分比除法，照样有精度丢失 - 推荐写
width: calc(33.333333% - 1px)或width: calc((100% - 2px) / 3)，用已知固定值抵消累计误差 - 真实案例：三列等宽卡片，父容器有左右各
1px边框，直接width: 33.33%会挤不下；改用width: calc((100% - 2px) / 3)，刚好腾出边框空间 - 注意：
calc()内部运算符前后必须有空格，calc(100%-1px)是无效语法
calc() 在 Flex/Grid 布局中的实际取舍
Flex 和 Grid 本身有更健壮的分配机制，盲目套用 calc() 反而增加维护成本。该用就用，不该用别硬上。
- Flex 场景下，优先用
flex: 1或flex: 0 0 calc(...)，而不是给每个子项写死width - Grid 场景下，
grid-template-columns: repeat(3, 1fr)比repeat(3, calc(100% / 3))更可靠；只有当需要混入固定间隙（如20px）时，才用grid-template-columns: calc((100% - 40px) / 3) calc((100% - 40px) / 3) calc((100% - 40px) / 3) - 兼容性提醒：
calc()在 IE9+ 支持良好，但 IE 中不支持嵌套calc()（如calc(calc(100% / 2) - 10px)），也别这么写
容易被忽略的 subpixel 渲染陷阱
即使 calc() 算出小数宽度（如 123.456px），浏览器是否真的按这个值渲染，取决于设备像素比和渲染引擎策略。这不是 bug，是现实限制。
立即学习“前端免费学习笔记（深入）”；
- Chrome 和 Safari 对 subpixel 渲染较激进，可能让元素模糊或轻微错位；Firefox 则更倾向向下取整
- 调试方法：打开 DevTools → Elements → 查看 computed width，对比 layout panel 中的实际渲染尺寸
- 真正稳妥的做法是：在关键对齐位置（如表单 label 和 input 并排）主动用
box-sizing: border-box+flex+ 固定间隙，而不是依赖百分比精度 - 如果必须用百分比，建议用能被整除的数字：比如三列用
33.333333%（6个3），比33.33%更接近理论值
