calc()单位混用需严格遵循规则：加减运算要求各值带单位且类型兼容，乘除仅允许一个值带单位，不支持函数嵌套；与css变量组合时须注意空格和fallback单位完整性。
calc() 里单位混用会直接报错
浏览器解析 calc() 时要求每个数值必须带单位（或为纯数字），且相同类型单位才能加减。比如 calc(100px + 2rem) 合法，但 calc(100 + 2rem) 会失效——100 缺少单位，CSS 引擎直接丢弃整条声明。
常见错误现象：元素宽度没变化、开发者工具里该样式被划掉、控制台无报错但渲染异常。
- 加减运算两侧单位必须可比较（如
px和rem都是长度单位，可以混用；但px和%在某些上下文中不能直接相加，尤其在 flex 或 grid 容器中行为不稳定） - 乘除只允许一个值带单位，另一个必须是无单位数字，例如
calc(100% / 3)可行，calc(100px * 2px)不合法 - 函数内不支持嵌套其他 CSS 函数（如
calc(var(--gap) + em(1))中的em(1)是无效写法）
响应式侧边栏 + 主内容宽度联动的典型写法
想让主内容区占满剩余空间（比如固定侧边栏 240px，其余给主区），别用 JS 监听 resize，直接靠 calc()：
.main {
width: calc(100% - 240px);
}
但要注意：如果父容器有 padding 或 border，100% 是按 content box 计算的，实际可能溢出。更稳妥的做法是配合 box-sizing: border-box，或改用 flex 布局——calc() 在这里只是“够用”，不是“最优解”。
- 若侧边栏宽度本身是响应式的（比如
min(240px, 20vw)），就不能直接塞进calc()，得用 CSS 自定义属性中转：--sidebar-width: 240px;→width: calc(100% - var(--sidebar-width)); - 在
grid-template-columns中使用calc()要格外小心，部分旧版 Safari 对calc()在 grid 中的支持不一致
与 CSS 变量搭配时的括号和空格陷阱
calc() 对空格敏感，尤其和 var() 组合时。下面这行会失败：
width: calc(100% -var(--gap));
因为 -var 被当成一个整体标识符而非减号+变量。正确写法必须在运算符前后加空格：
width: calc(100% - var(--gap));
另外，var() 的 fallback 值如果含单位，也要确保能参与计算：
- ✅
calc(100% - var(--gap, 16px))—— fallback 是16px，单位明确 - ❌
calc(100% - var(--gap, 16))—— fallback 缺单位，整个calc()失效 - ⚠️
calc(var(--width, 50%) - 1rem)在 --width 未定义时会退成50% - 1rem，但若父容器 width 为 auto，50%可能无意义
移动端适配中 viewport 缩放导致 calc() 值“失准”
当用户双指缩放页面（尤其是 iOS Safari），100% 和 px 的实际像素表现会偏移，但 calc() 的计算过程仍按原始 CSS 像素执行，造成视觉错位。这不是 bug，而是 CSS 像素模型本身的限制。
此时不要强行用 calc() 拼凑“看起来对齐”的值，而应优先使用相对单位（rem、em）或弹性布局（flex、grid）来规避。
真正容易被忽略的是：很多团队把 calc() 当成“万能动态计算工具”，但它本质只是 CSS 层面的静态表达式求值，不响应 DOM 尺寸变化、不感知视口缩放、也不处理盒模型边界条件。复杂逻辑还是交给 JS + ResizeObserver 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
