calc(100% - 20px)合法，浏览器自动将%转为像素后与px运算；但需确保父容器有明确宽度基准，且运算符两侧必须加空格，否则声明失效。

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 规范强制要求运算符前后必须有空格。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确：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 的布局在滚动条显隐切换时可能闪动或错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！