calc() 使用规则极严：加减需单位兼容且运算符前后有空格，乘除要求纯数字参与，css变量需带单位fallback，仅适用于长度属性，父容器须有宽度基准。
calc() 能混用单位，但规则极严——写错一个空格或单位，整条样式就被浏览器静默丢弃，DevTools 里连报错都没有。
calc() 加减运算必须单位兼容且带空格
px 和 rem、vh 和 px、% 和 em 都能加减，前提是两边都带单位；但 100 + 2rem 这种纯数字不带单位的写法会直接失效，整条声明被忽略。
-
calc(100% - 240px)✅ 合法：百分比和像素都是长度单位，可比较 -
calc(100% - 240)❌ 失效：240缺单位，浏览器拒识 -
calc(100%-240px)❌ 失效：减号前后没空格，被当作文本标识符处理 -
calc(100% + 5vh)✅ 合法：同属视口/相对长度单位，现代浏览器全支持
乘除只允许一个值带单位
乘法要求至少一侧是纯数字；除法要求右侧（除数）必须是纯数字。违反就无效，不是报错，而是整条规则不生效。
-
calc(100% / 3)✅ 正确：除数3无单位 -
calc(100% / 3px)❌ 错误：除数带单位，解析失败 -
calc(2 * 50px)✅ 正确：系数2是纯数字 -
calc(50px * 20px)❌ 错误：两边都带单位，CSS 不支持面积单位 -
calc((100% - 20px) / var(--col, 3))✅ 必须加括号，否则/优先级高，先算20px / var(--col)
和 CSS 变量搭配时最容易踩的三个坑
变量让 calc() 更灵活，但也把错误放大了三倍：单位缺失、空格错位、fallback 不完整都会导致整条规则被跳过。
-
width: calc(100% - var(--gap));❌ 如果--gap未定义，整个 calc() 就失效；必须加 fallback：var(--gap, 16px) -
--gap: 16;❌ 缺单位，var(--gap, 16)的 fallback 也缺单位，整条 calc() 作废；要写成--gap: 16px;或var(--gap, 16px) -
calc(100% -var(--gap))❌ 减号后紧贴var，被识别为-var这个非法标识符；正确是calc(100% - var(--gap))（运算符前后都空格） - 在
grid-template-columns中用calc(1fr - 20px)要小心：旧版 Safari 对 grid + calc 组合支持差，建议改用repeat(auto-fit, minmax(calc(300px - 20px), 1fr))这类更稳写法
哪些属性真能用 calc()，哪些只是“看起来可以”
calc() 不是万能公式，它只对接受「长度值」的属性起作用。写错属性名或选错场景，再对的公式也白搭。
- ✅ 安全区：
width、height、margin、padding、font-size、top/left（需定位）、transform: translateX(calc(...)) - ❌ 明确不支持：
z-index、flex-grow、grid-row、line-height（除非写成line-height: calc(1.5em)这种带单位形式） - ⚠️ 半支持：
max-width和min-width能用，但如果 calc() 结果算出负值，会被截断为0，不提示也不报错 - 父容器没设宽度（比如 flex 子项默认
width: auto），100%就没基准，calc(100% - 20px)实际结果是0px
真正难的从来不是写对公式，而是确认父容器有宽度基准、属性本身支持长度值、所有变量都有带单位的 fallback——这三点漏掉任一，calc() 就只是页面里一段安静的注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
