css变量必须带单位且calc()中运算符两侧需空格，否则规则静默失效；:root定义、避免嵌套calc、慎用vh改用dvh、变量未定义时整条样式被丢弃。
直接用 var(--name) 套进 calc() 就行，但变量必须带单位、calc() 里运算符两侧必须有空格，否则整条规则静默失效。
变量定义必须带单位
CSS 变量本身不带类型约束，--gap: 20 这种写法看着省事，但后续 calc(var(--gap) * 2) 会失败——因为 20 * 2 没单位，浏览器无法推导出长度值。错误不是报错，而是整条声明被忽略，DevTools 里只显示 Invalid property value。
-
--gap: 20px✅ 后续可用于加减、乘无单位数 -
--scale: 1.5✅ 可用于乘除（如calc(16px * var(--scale))） -
--gap: 20❌ 即使后面补px也无效，单位必须写死在变量值里 - 推荐统一放在
:root，避免作用域遗漏
calc() 里空格和括号不能省
calc() 解析极其严格：减号 - 或加号 + 前后缺空格，整个表达式就失效。这不是兼容性问题，是 CSS 引擎直接跳过该声明。
-
width: calc(100% - var(--gap));✅ 正确 -
width: calc(100%-var(--gap));❌ 失效，-前后没空格 -
width: calc(100% - var(--gap) * 2);✅ 乘法两侧可不空格，但建议统一风格 - 嵌套
calc(calc(...))在 Safari 15.4 之前完全不支持，别用
Grid 中 calc() 容易整列消失
grid-template-columns 里只要一个 calc() 出错，对应列就变成 auto 或 0px，页面上直接看不见——不是渲染慢，是根本没解析成功。
-
grid-template-columns: 300px calc(100% - 300px);✅ 安全 -
grid-template-columns: minmax(300px, calc(100vw - 240px));✅ 推荐，绕开父容器宽度依赖 -
grid-template-columns: repeat(calc(100vw / 250px), 1fr);❌ 重复次数不支持表达式，语法非法 - 别在
minmax()里传1fr当最小值：minmax(1fr, ...)在 Firefox v110 之前 fallback 到max-content，列宽失控
用 dvh 替代 vh 避免滚动抖动
calc(100vh - 60px) 在 iOS Safari 和 Android WebView 里常因地址栏高度变化导致尺寸跳变。滚动时 vh 动态重算，calc() 跟着抖。
-
height: calc(100dvh - 60px);✅ Chrome 105+/Safari 16.4+ 支持，始终排除地址栏 -
box-sizing: border-box配合min-width/max-width使用，确保 padding/border 不撑破限制 - 复杂表达式建议拆成中间变量：
--content-width: calc(100% - var(--gap));，再用calc(var(--content-width) / 3)，调试更直观
最常被忽略的点：变量未定义时，var(--undefined) 返回 invalid，整个 calc() 计算结果为 invalid，浏览器直接丢弃该样式——连 warning 都不报，只能靠 DevTools 逐条检查 Invalid property value。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
