CSS 中的 calc() 函数，看似简单，但在实际项目开发中，踩坑的几率并不低。十行代码里有一行未生效，排查半天，最后发现可能只是少了一个空格。下面先为大家梳理几个核心认知要点。
calc() 并非“动态计算引擎”，它仅在解析时执行一次计算。所谓的混合单位“自适应”，本质上是依靠变量更新或视口变化触发重新计算，而单位混用稍有疏忽，整条声明就会静默失效。
calc() 加减运算为何总是不生效？常见原因与解决方法
绝大多数情况下，问题出在单位类型不兼容或格式细节上——浏览器会直接丢弃整个 calc() 声明，开发工具中那行样式会被划掉，但控制台不会报错。
calc(100% - 20px)合法，因为 % 和 px 均属于长度单位，现代浏览器可将其对齐到同一基准（如视口宽度）calc(1rem - 10px)理论上合法，但旧版 Safari 或某些安卓 WebView 可能拒绝解析，建议统一改用px或vh/vwcalc(100%-20px)（无空格）非法：解析器会将其视为一个带负号的维度值，直接忽略整条规则calc(100% + 2em)在font-size未就绪时可能取默认值（16px），导致初始渲染出现偏差，iOS 上尤为明显
乘除运算的单位限制如何牢记？一条铁律避免语法错误
牢记一条核心原则：乘法只允许一个值带单位，除法只允许被除数带单位。违反此规则即为语法错误，CSS 引擎不会识别。
- ✅
calc(100% / 3)、calc(24px * 1.5)、calc(50vw * 2) - ❌
calc(100% * 2px)（两边都带单位）、calc(100px / 20px)（除数带单位） - ⚠️
calc(var(--gap) * 2)要求--gap必须是带单位的合法值（如8px），空字符串或auto会让整条声明失效
与 CSS 变量配合使用时最容易遗漏哪些细节？
变量本身并不具备“动态”特性，calc() 也不会监听变更——你需要手动设值，并且 fallback 和作用域必须形成闭环。
- 定义变量时别漏掉空格：
--sidebar-width: 240px;✅，--sidebar-width:240px;❌（部分浏览器会忽略） - 使用前添加 fallback：
width: calc(100% - var(--sidebar-width, 240px));，否则变量未定义时整条会失效 - 变量作用域要足够窄：
.layout { --sidebar-width: 240px; }，避免全部堆入:root，防止多个组件互相覆盖 - 括号不能省略：
width: calc((100% - 20px) / var(--count));——除法优先级较高，若无外层括号会先计算20px / var(--count)
哪些场景下 calc() 会被布局规则覆盖？排查思路与解决方案
写了 width: calc(100% - 240px) 却没有任何反应，大概率不是函数写法的问题，而是被更高优先级的机制所覆盖。
- Flex 项目中，
flex: 1或flex-grow: 1会无视width，需显式添加flex: none或min-width: 0 - Grid 项中，
grid-column: 1 / -1这类跨度声明会覆盖 width 计算 - 父容器为
display: inline或浮动未清除时，100%失去意义，calc 结果自然也无效 - 固定定位元素（
position: fixed）的width: calc(100% - 240px)中，100%是相对于视口而非父容器，容易产生误判
真正关键的不在于“怎么写 calc”，而是理解它在哪一层生效——它仅在盒模型尺寸计算阶段起作用，一旦进入 Flex/Grid 分配逻辑，或被 max-width、overflow 等规则干预，结果便不可控。值得额外提醒：每次怀疑 calc 失效时，先打开开发工具查看 computed 样式中的 width 是否真正被应用，再向上追溯布局上下文。
