calc()语法严格：加减号前后必须有空格，乘除运算单位受限，仅支持数值型css属性，旧版浏览器需前缀，预处理器中变量需特殊处理。
calc() 能混合单位计算，但写错一个空格或单位组合就整个声明失效——它不是“能算就行”，而是“语法严丝合缝才生效”。
加减号前后必须有空格
这是最常踩的坑：浏览器把 calc(100%-20px) 当作一个非法标识符，直接丢弃整条样式。哪怕只漏一个空格，width 就退回到默认值（比如 auto），布局当场崩。
-
calc(100% - 20px)✅ 正确 -
calc(100%+20px)❌ 解析失败，等同于没写 -
calc(50vh - 1rem + 2px)✅ 支持多级混合，但每个+和-两侧都得有空格
乘除运算的单位限制很死
* 和 / 不是自由组合：乘法要求至少一边是纯数字（无单位），除法要求右边必须是纯数字。违反就静默失效，连警告都不报。
-
calc(50% * 2)✅ 可以，倍数是数字 -
calc(100px / 4)✅ 可以，除数是数字 -
calc(50px * 20px)❌ 不合法，CSS 不支持面积单位 -
calc(100% / 20px)❌ 除数带单位，语法错误
calc() 可用在几乎所有数值型 CSS 属性上
不只是 width 或 height，只要属性接受长度值，基本都能用 calc() 动态生成。
-
margin：margin-left: calc(1rem + 5px) -
font-size：font-size: calc(1.2rem + 0.5vw) -
top（配合position: absolute）：top: calc(50vh - 32px) -
grid-template-columns：grid-template-columns: calc(1fr - 20px) 20px calc(1fr - 20px)
兼容性和预处理器里要额外注意
现代浏览器已全面支持标准 calc()，但如果你还在维护 IE9–11 项目，得加前缀；用 Less/Sass 时，变量不能直接塞进 calc()，否则预处理器会提前求值或报错。
- 旧浏览器需补全：
width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); - Less 中变量写法：
width: calc(~"100% - @{gap}");或width: e("calc(100% - @{gap})"); - Sass 中要用插值：
width: calc(100% - #{$gap});（前提是$gap是带单位的 Sass 变量）
真正容易被忽略的是：calc 表达式里的括号不改变单位语义，只控制运算顺序；而一旦某个子表达式因单位冲突或空格缺失而无效，整个 calc() 就归零处理——它不会局部降级，也不会报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
