calc() 允许混用 %、px 等兼容单位，运行时计算；必须运算符前后加空格，如 calc(100% - 20px)；适用于侧边栏固定+主内容自适应等场景；IE10–11不支持 * /，现代浏览器兼容性好。
calc() 里混用 % 和 px 是完全合法的
只要单位类型兼容，calc() 就允许在同一个表达式中混合 %、px、em、rem 等相对/绝对单位。浏览器会在运行时把百分比解析为当前上下文的计算值（比如父容器宽度的 50%），再与像素值做加减运算。这是它和预处理器（如 Sass）的关键区别：CSS 的 calc() 是运行时计算，不是编译时替换。
常见错误：空格缺失或运算符紧贴括号
下面这些写法都会让整个 calc() 失效（浏览器直接忽略该声明）：
width: calc(100%-20px); /* ❌ 缺少空格 */ width: calc(100% -20px); /* ❌ 减号后没空格 */ width: calc(100% - 20 px); /* ❌ 单位前多空格 */ width: calc(100% - 20px;); /* ❌ 分号在括号内 */
正确写法必须严格遵守：运算符前后各一个空格，单位紧贴数值，括号内外不嵌分号。
-
width: calc(100% - 20px)✅ -
padding-left: calc(5% + 16px)✅ -
margin: calc(1rem - 4px) auto✅（注意只对第一个值生效）
实际场景：侧边栏固定宽 + 主内容自适应
这是最典型的使用动机——既要保留响应式布局的弹性（用 %），又要扣除固定尺寸组件（如导航栏、边框、阴影）所占空间。
立即学习“前端免费学习笔记（深入）”；
例如，一个带 240px 固定侧边栏的主内容区：
.main-content {
width: calc(100% - 240px);
margin-left: 240px;
}注意点：
- 如果父容器本身宽度不足 240px，
calc(100% - 240px)会得出负值，但浏览器会按 0 处理（不会溢出或报错） - 不能在
width上写calc(100vw - 240px)来替代，因为vw是视口单位，和父容器无关，容易导致水平滚动条 - 若侧边栏用了
position: fixed，主内容需额外用margin-left或padding-left预留空间，仅靠width: calc()不够
兼容性与性能提醒
calc() 在现代浏览器中支持极好（Chrome 26+/Firefox 16+/Safari 7+/Edge 12+），但 IE10–IE11 仅支持 + 和 -，不支持 * 和 /（且乘除数必须是无单位数字，如 calc(100% / 3) 在 IE 中非法）。
性能上无需担心：它是 CSS 引擎原生支持的表达式，不触发重排，也不依赖 JS。但要注意——
- 避免在大量元素上高频修改含
calc()的属性（如动画中改left），虽然计算快，但样式更新本身有开销 - 不要用
calc()模拟 JS 逻辑，比如calc((var(--is-mobile) * 100%) + (var(--is-desktop) * 50%))—— 自定义属性值是字符串，无法参与算术，这种写法无效
真正难的是边界控制：当百分比基准坍缩（比如父元素 display: flex 但未设宽）、或嵌套多层 calc() 时，结果可能不符合直觉。动手前，先用 DevTools 实时编辑验证输出值。
