calc()中加减号前后必须有空格，否则浏览器静默丢弃整条声明；乘除号虽无强制要求，但加空格可避免预处理器错误和兼容性问题。
calc() 里混合单位必须加空格
很多人写 calc(100%-20px) 发现不生效，浏览器直接忽略整个声明——根本原因是 CSS 规范强制要求运算符两侧必须有空白。少一个空格，calc() 就算语法错误，被静默丢弃。
正确写法只有这一种：calc(100% - 20px)。注意减号前后各一个空格，不能是中文符号，也不能紧贴数字或单位。
- ✅
calc(100% - 20px) - ❌
calc(100%-20px)（无空格） - ❌
calc(100%−20px)（用了全角减号） - ❌
calc(100% -20px)（减号后没空格）
百分比基准取决于父容器的 width，不是 viewport
calc(100% - 80px) 的 100% 永远指**当前元素父容器的 width 值**，不是屏幕宽度，也不是 body 宽度，更不是 flex 容器分配后的剩余空间。如果父容器 width 是 auto 或未显式设置，那 100% 可能为 0 或不可预测。
常见陷阱：在 flex 布局里对子项用 width: calc(100% - 60px)，结果宽度异常小——因为它的父 flex 容器默认 width: auto，导致 100% 实际计算值极小。
- 确保父容器有明确
width（如width: 100%、width: 800px） - flex 子项优先用
flex: 1+margin或padding替代calc() - grid 布局中同理，
100%指 grid track 宽度，需确认 track 是否已定义
calc() 不支持嵌套，也不能用于所有属性
calc() 是 CSS 值函数，不是编程表达式，它不能嵌套调用，比如 calc(calc(100% - 20px) - 10px) 是非法的。同时，并非所有接受长度的属性都支持 calc()，尤其老版本浏览器兼容性有限。
目前主流浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）均支持 width、height、margin、padding、left、top 等常用属性中的 calc()；但像 font-size 在 IE9 中不支持，border-width 在部分旧 Safari 中会失效。
- 避免嵌套：
calc(100% - 20px - 10px)✅，而不是两层calc() - 慎用于
transform: translateX(calc(100% - 50px))—— 部分 Android Webview 解析不稳定 - 不要对
background-position的百分比值混用calc()，行为不一致
替代方案：什么时候不该硬上 calc()
不是所有“减去固定像素”的场景都适合 calc()。比如侧边栏固定 240px、主内容区占满剩余空间，在 flex 或 grid 中一行代码就能解决，比 calc(100% - 240px) 更健壮。
- flex 布局：
display: flex父容器 +flex: 1主区域，天然撑满剩余空间 - grid 布局：
grid-template-columns: 240px 1fr，语义清晰且响应友好 - 纯靠
calc()的场景，通常出现在需要动态留白但无法改布局结构时（如第三方组件内部微调）
真正容易被忽略的是：calc() 计算结果不会触发重排优化，频繁修改会导致 layout thrashing；如果像素值来自 JS 动态计算，不如直接设 style.width 或用 CSS 自定义属性 + calc(var(--base) - 20px) 来集中管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
