calc()不生效主因是加减号两侧缺空格、0未带单位、预处理器未插值或父容器高度未设；正确写法如calc(100% - 20px)和calc(0px + 100px)，并避免less/sass提前计算。
calc() 不是“动态计算引擎”，它只做一次解析时计算；所谓混合单位能“自适应”，本质是靠变量更新或视口变化触发重算，而单位混用稍有不慎就会整条声明静默失效。
calc() 加减运算为什么总不生效？
最常见原因是单位类型不兼容或空格缺失——浏览器把整个 calc() 声明直接丢弃，开发者工具里那行样式会被划掉，但控制台不报错。
-
calc(100% - 20px)合法，因为 % 和 px 都是长度单位，现代浏览器可对齐到同一基准（如视口宽度） -
calc(1rem - 10px)理论上合法，但旧版 Safari 或某些安卓 WebView 可能拒绝解析，建议统一换为px或vh/vw -
calc(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 是否真被应用，再往上查布局上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
