calc()生效需三前提：父容器有明确宽度、属性支持长度单位、运算符两侧有空格；常见失效因声明被静默丢弃，DevTools中width显示auto即非法。
calc() 不是万能布局引擎，它只做一次静态解析计算；真正起效的前提是：父容器有明确宽度基准、属性支持长度单位、运算符两侧有空格——缺一不可。
calc() 为什么写了却没生效
最常见原因不是公式错，而是整条声明被浏览器静默丢弃。打开 DevTools 查 computed 样式，如果 width 显示为 auto 或直接不出现，说明 calc() 表达式非法。
-
calc(100%-20px)缺空格 → 浏览器当无效值处理 - 父容器没设
width（比如 flex 子项默认无宽度），100%就算不出基准 → 结果为0px - 在
grid-template-columns里写calc(1fr - 20px)→1fr是分配逻辑，不是长度单位，减像素后可能归零 - 用了
calc(100% * 0.8)→ 乘除只允许纯数字系数作用于带单位值，0.8不是整数，Chrome/Firefox 直接拒识
哪些属性真能用 calc() 动态算
calc() 只接受「长度类」值的属性才有效，不是所有带数字的地方都能塞进去。
- ✅ 有效：
width、height、margin、padding、font-size、top/left（需定位）、transform（如translateX(calc(-50% + 16px))） - ❌ 无效：
z-index、line-height（除非写成line-height: calc(1.5em)这种带单位形式）、flex-grow、grid-row - ⚠️ 半有效：
max-width和min-width能用，但若calc()结果为负，会被截断为0，不报错也不提示
和 CSS 变量搭配时最容易翻车的点
变量让 calc() 更灵活，但也放大了错误概率——变量未定义、单位缺失、作用域错乱，都会导致整条规则失效。
立即学习“前端免费学习笔记（深入）”；
- 必须加 fallback：
width: calc(100% - var(--gap, 20px));，否则--gap未声明时整条忽略 -
--gap: 20❌（缺单位）→calc(100% - var(--gap))失效；要写成--gap: 20px✅ - 别在
:root里堆一堆全局变量，多个组件改同一个--sidebar-width会互相覆盖 - 除法场景必须括号：
width: calc((100% - 20px) / var(--col-count));，否则/优先级高，先算20px / var(--col-count)
响应式场景下比 calc() 更稳的替代方案
很多你以为非用 calc() 不可的场景，其实有更健壮、语义更清的原生方案。
- 三等分 + 间隙：用
grid-template-columns: repeat(3, 1fr) 1rem;比calc((100% - 2rem) / 3)更直观，且 gap 不参与尺寸计算 - 侧边栏固定宽 + 主内容自适应：用
flex: 0 0 240px+flex: 1，比给主内容写width: calc(100% - 240px)不易被 flex 规则吞掉 - 视口缩放字体：用
clamp(1rem, 4vw, 1.5rem)，中间值可嵌calc()，但整体行为可控，不会小屏变负宽 - 绝对定位居中偏移：用
left: 50%; transform: translateX(calc(-50% + 16px));，而不是left: calc(50% + 16px)—— 后者偏的是左边缘，不是中心
真正难搞的从来不是怎么写公式，而是判断该不该用 calc()：它适合补位，不适合当主干布局逻辑。一旦发现要连写三层 calc() 套括号，或者得靠 JS 手动更新变量来驱动变化，就该停下来想想——是不是布局模型本身选错了。
