calc() 在 css 解析阶段计算，支持混合单位运算；加减需单位且空格严格，乘除仅一端可带单位；变量 fallback 必须含单位；嵌套已支持但应扁平化；动画中慎用，单位隐性冲突易致布局偏差。
calc() 不是运行时动态更新的“活函数”，它在 CSS 解析阶段就完成计算，但能让你用混合单位写一条声明，替代多套媒体查询或 JS 逻辑——只要语法对，浏览器就认。
加减运算必须带单位且空格不能少
加减两侧的值都得有单位（或纯数字），而且长度类单位才能混用；运算符前后不加空格，整条声明直接失效。
-
calc(100% - 20px)✅ 合法：百分比和像素都是长度单位，空格齐全 -
calc(100%-20px)❌ 失效：缺少空格，浏览器丢弃整条规则 -
calc(100 + 20px)❌ 失效：100没单位，CSS 引擎不识别 -
calc(100vh - 50% + 1rem)✅ 合法：三者同属长度维度，可链式运算
乘除只允许一个值带单位
乘法或除法中，必须一边是带单位的量，另一边是纯数字；两个都带单位会报错，浏览器跳过该声明。
-
calc(16px * 1.5)✅ 合法：16px带单位，1.5是系数 -
calc(100% / 3)✅ 合法：100%带单位，3是无单位除数 -
calc(20px * 2em)❌ 不合法：两边都带单位，解析失败 -
calc(100vh / 2px)❌ 不合法：除数带单位，直接被忽略
和 CSS 自定义变量搭配时，fallback 单位要完整
var(--width) 如果未定义、为空或值非法（比如 "" 或 auto），整个 calc() 表达式会被丢弃——而且控制台不报错，开发者工具里那条样式直接被划掉。
- 写法正确：
width: calc(100% - var(--sidebar-width, 240px));—— fallback 必须含单位 - 写法危险：
width: calc(100% - var(--sidebar-width));—— 若变量没设，整条失效，页面可能崩布局 - 变量定义要同步：
:root { --sidebar-width: 240px; }，别漏写或拼错名
嵌套 calc() 在主流浏览器中已支持，但别滥用
旧资料说“不支持嵌套”，那是过时结论。现在 calc(calc(100% / 3) - 20px) 能跑，但没必要——它等价于 calc(100% / 3 - 20px)，多一层括号反而增加维护成本和出错概率。
- 优先扁平化：
calc(100% / 3 - 20px)比嵌套更易读、更易调试 - 嵌套仅用于复杂优先级控制，比如
calc(100vh - (60px + 1rem))，此时括号是语义需要，不是 calc 嵌套 - 动画中慎用：
calc()值无法被 GPU 加速，高频变化（如 scroll 触发）会导致重排卡顿
真正容易被忽略的不是语法本身，而是单位类型隐性冲突——比如在 flex 容器里对子项用 calc(100% - 20px)，这个 100% 是相对于父容器 content box 的，如果父元素有 padding，结果就会偏小；这种细节不会报错，但布局会悄悄错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
