calc()混用单位需严格遵循量纲规则：加减要求同为长度单位，乘除需纯数字参与，且空格、单位、上下文缺一不可，否则静默失效。
calc() 能混用单位，但不是“随便混”——写错一个空格、选错一个上下文，整个声明就静默失效，浏览器当它不存在。
calc() 中加减运算的单位混合规则
calc() 允许在加减中混用 px、%、vh、rem 等长度单位，前提是它们都属于“长度量纲”。但关键限制是：
- 100% + 20px ✅ 合法（百分比在此被解析为长度）
- 100px + 1em ✅ 合法（都是长度）
- 100% + 1em ✅ 合法（同上）
- 100px + 10% ✅ 合法（但结果依赖父容器宽度）
- 100px + 10vw ✅ 合法（都是长度）
- 100px + 10deg ❌ 静默失败（角度 ≠ 长度）
容易踩的坑：
-
calc(100%-20px)缺空格 → 整个声明被丢弃，回退到默认值（如width: auto） - 在
height上用100%却没给祖先设高度 →100%解析为0，结果就是calc(0 - 20px)→ 无效值
乘除运算必须满足“无单位数参与”
* 和 / 不允许两个带单位的值直接运算：
- calc(2 * 16px) ✅ 2 是纯数字，16px 是长度
- calc(100% / 4) ✅ 4 是纯数字
- calc(1rem * 1.5) ✅ 小数也行
- calc(100px * 20px) ❌ 失效（不能长度 × 长度）
- calc(100% * 0.75) ✅ 可用于算比例，但注意：它不等于 75%，而是等价于 75%（语义一致，但计算路径不同）
常见误用：
- 把响应式字体写成
font-size: calc(1rem * (100vw / 375));→ 看似合理，但部分 Android 浏览器会截断小数点后位数，导致字体突变 - 用
calc(100vw / 375 <em> 16)</em>算 16:9 宽度时忘了空格 →100vw/37516在旧版 Safari 直接不认
CSS 变量和 calc() 搭配的写法陷阱
变量必须“干净”，且空格不能省： ---gap: 20px; → width: calc(100% - var(--gap)); ✅（注意 - 前后空格）
- --gap: 20px; → width: calc(100%-var(--gap)); ❌ 缺空格，整个 calc 失效
- --gap: 20;（没单位）→ calc(100% - var(--gap) * 1px) ❌ 不支持单位拼接，* 1px 会被当乘法，但 20 * 1px 不合法
- calc(var(--gap) + 10px) 要求 --gap 值本身含单位（如 20px），否则加法两侧量纲不匹配
真正难的不是语法对不对，而是你得判断：这个值是不是真需要 calc() 算？比如留边，用 margin 或 padding 更稳；比如宽高比，padding-bottom + position: absolute 比 height: calc(100vw * 9 / 16) 可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
