<p>calc(100% - 20px)合法，浏览器自动将%转为像素后与px运算；但需确保父容器有明确宽度基准，且运算符两侧必须加空格，否则声明失效。</p>
calc() 里混用 % 和 px 是完全合法的
只要单位类型兼容，calc() 就允许在同一个表达式中混合 %、px、em、rem 等。浏览器会在运行时把相对单位（如 %）解析为当前上下文的实际像素值，再和绝对单位（如 px）做加减运算。关键不是“能不能”，而是“在哪算、以谁为基准”。
常见错误现象：width: calc(100% - 20px) 在某些父容器未设宽、或内部有浮动/绝对定位子元素时，结果不符合预期——不是语法错，是百分比的参照物变了。
-
%始终相对于**包含块（containing block）** 的对应尺寸（比如width: 100%参照父元素宽度） - 加减运算中，
%和px不需要“转换单位”，浏览器自动处理，但必须保证维度一致（不能calc(100% + 10em)用于width，因为em是基于字体大小的，而宽度维度要求是水平尺寸） - 乘除只允许用无单位数值（如
calc(100% / 2)或calc(50px * 2)），不能calc(100% * 2px)—— 这会报语法错误
什么时候 calc(100% - 40px) 会失效
这个写法本身没错，但实际效果常被误判，根本原因在于：百分比的“100%”所依赖的容器宽度可能不是你想象的那个。
典型场景：
立即学习“前端免费学习笔记（深入）”；
- 父元素是
display: flex且未设width，子项又用了flex: none，此时100%可能按内容宽度而非容器宽度计算 - 元素处于
position: absolute，其包含块是最近的已定位祖先，若该祖先没设宽，100%就退化为内容宽度 - 表格单元格（
td）中使用calc()，%行为受表格布局算法影响，不一定响应父table宽度
验证方法：临时加 background: red 和 border: 1px solid，用开发者工具看实际渲染宽度是否贴边；再检查 computed 样式里的 width 值，确认它是否真等于“父宽减40”。
calc() 中空格不是可选的
很多人复制代码时漏掉空格，导致整个表达式被忽略（浏览器直接丢弃该声明）。CSS 规范强制要求运算符前后必须有空格。
正确：width: calc(100% - 20px)
错误：width: calc(100%-20px)（无空格）、width: calc(100% -20px)（减号后没空格）、width: calc(100% - 20px )（右括号前多空格也可能触发某些旧浏览器解析失败）
其他易错点：
- 括号必须成对，嵌套没问题，但别漏写，比如
calc(100% - (20px + 10px))是合法的 - 函数名
calc全小写，Calc或CALC无效 - 不支持变量嵌套，
calc(var(--gap) - 10px)可以，但calc(var(--width) - var(--gap))要求两个 CSS 变量都已定义且单位兼容
移动端适配中慎用 calc(100vw - 32px)
看起来很美：想让一个横条占满视口宽度，再减去左右各 16px 边距。但 100vw 包含滚动条宽度（尤其 iOS Safari），当页面内容高度超屏、出现垂直滚动条时，100vw 实际略小于可见区域宽度，calc(100vw - 32px) 就会导致横向溢出或换行。
更稳的写法：
- 用
100%替代100vw（前提是父容器宽度就是视口宽度） - 加
box-sizing: border-box，然后用padding代替减像素，例如：width: 100%; padding: 0 16px; box-sizing: border-box - 如果必须用
vw，可配合媒体查询检测滚动条：@media (max-width: 100vw)并降级处理（不过兼容性有限）
真正容易被忽略的是：calc 的计算发生在布局阶段早期，它不会响应滚动条动态出现/消失，所以依赖 vw 的布局在滚动条显隐切换时可能闪动或错位。
