calc()支持混用绝对单位（px、em、rem、vh、vw等）与相对单位（%），加减要求同量纲（如长度+长度），乘除需一操作数为无单位数；100%依赖父容器明确尺寸，否则失效。
calc() 里能混用哪些单位
calc() 支持在加减运算中混合使用绝对单位（如 px、em、rem、vh、vw）和相对单位，但有硬性限制：**加减两侧必须是可计算的同类型量纲**——实际意思是，你不能写 calc(100px + 1em) 这种“看似合理但非法”的表达式，浏览器会直接忽略整个声明。真正允许的是：100px + 2em ✅（长度+长度），100% - 2rem ✅（百分比被当作长度参与计算），50vh - 10px ✅。
乘除只允许一个值为无单位数字，比如：calc(100% / 3) ✅，calc(2em * 1.5) ✅，但 calc(1em * 1px) ❌ 会失效。
为什么 calc(100% - 20px) 有时不生效
常见原因是父容器没有明确的尺寸基准。百分比值（100%）在 calc() 中仍依赖上下文：如果父元素 height 是 auto，那么 100% 在 height 上就无法解析，整个 calc() 计算结果变成无效值。
- 用于
width时，只要父容器有明确宽度（或默认块级行为），100%通常可用 - 用于
height时，需确保从根元素开始，所有祖先都设了具体高度（如html, body { height: 100%; }），否则100vh更可靠 - Flex 或 Grid 容器内部，
100%行为可能受主轴/交叉轴影响，优先考虑flex: 1或1fr
calc() 在 CSS 变量中怎么安全使用
直接把变量塞进 calc() 很容易出错，比如：
--gap: 20px; width: calc(100% - var(--gap)); /* ❌ 语法错误：缺少空格 */
正确写法必须保留运算符前后空格，且变量值本身不能带单位以外的字符：
- ✅
calc(100% - var(--gap))→ 要求--gap: 20px（纯数值+单位） - ✅
calc(var(--base-size) * 1.2)→--base-size: 16px - ❌
calc(100% - var(--gap, 20px))→ fallback 不支持单位，会解析失败 - ⚠️ 不要写
calc(var(--gap)px)—— 单位不能拼接在变量后面
移动端适配中 calc() 的典型误用
有人用 calc(100vw - 16px) 做全宽减去左右边距，但在 iOS Safari 中可能因滚动条或缩放导致精度偏差，视觉上出现细微溢出或留白。
- 更稳的做法是结合
box-sizing: border-box和padding，而非靠calc()算宽度 - 避免在
font-size中高频使用calc(1rem + 0.25vw)：不同浏览器对vw的最小字体限制处理不一致，可能被截断 -
calc()本身不触发重排，但若它依赖的属性（如width）被 JS 频繁修改，叠加计算可能放大布局抖动
真正难的不是写对语法，而是判断什么时候不该用 calc() —— 比如该用 margin 就别硬套减法，该用 clamp() 控制响应字号就别叠三层 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
