calc()乘除运算要求一侧为纯数字，因css规范将单位视为量纲、纯数字为无量纲缩放因子；两侧带单位会导致量纲冲突（如px²非法），故乘法需单位×数字、除法严格要求除数为纯数字，0也必须带单位。
calc() 里乘除运算不要求“两个都带单位”，是因为它的语法设计就是单侧单位敏感：乘法只要求一侧是纯数字，除法要求右侧（除数）必须是纯数字。这不是偷懒，而是 CSS 规范明确限定的类型规则。
为什么乘除允许一侧无单位
浏览器在解析 calc() 时，会把单位看作“量纲”，而纯数字（如 2、1.5）被视作无量纲缩放因子。只要单位出现在左侧或被显式指定，结果的量纲就能唯一推导出来：
-
width: calc(100% * 2)→ 100% 是长度类量纲，“×2”只是放大两倍，结果仍是 % -
font-size: calc(16px * 1.5)→ 16px 是长度，×1.5 后仍是 px -
padding: calc(60px / 3)→ 除数3是纯数字，结果仍是 px
如果两侧都带单位（比如 100px * 20px），浏览器无法确定该输出面积（px²）还是非法值——CSS 没有面积单位，直接报错丢弃。
变量值没单位时，为什么乘法还能“凑合用”
因为乘法能靠“单位升格”兜底：把无单位变量乘以 1px 或 1rem，就把它转成合法长度值。例如：
-
--size: 24→width: calc(var(--size) * 1px)✅ 得24px -
--scale: 1.2→font-size: calc(1rem * var(--scale))✅ 得1.2rem
但注意顺序：var(--scale) * 1rem 在 Safari 15.4 之前会静默失败，必须把带单位项放左边。
除法右侧带单位就必然失效
除法对右侧（除数）极其严格：它必须是纯数字，不能带任何单位。哪怕写成 100px / 2px 或 100% / 2em，所有浏览器都会整条丢弃。
- ❌
height: calc(100vh / 20px)—— 除数带单位，语法非法 - ❌
width: calc(var(--col) / 1fr)—— 同样不认，1fr不是数字 - ✅
width: calc(100% / 3)、line-height: calc(1.5 / 2)—— 右侧纯数字才安全
如果你看到除法没生效，先检查 DevTools 的 Styles 面板里那行是否被划掉；如果是，90% 是右侧混进了单位。
真正容易被忽略的是 0
0 是唯一看起来可以不带单位、实则最危险的值。写成 --gap: 0 看似省事，但在 calc(100% - var(--gap)) 中会变成 100% - 0，浏览器无法判断这个 0 是 0px 还是 0%，直接丢弃整条声明。必须写成 --gap: 0px 或 --gap: 0rem。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
