calc()混用百分比和像素不生效，主因是百分比需相对包含块尺寸，而Flex子项等场景下包含块宽度未定义，导致整个calc声明被浏览器丢弃。
calc() 里混用百分比和像素为什么有时不生效
直接写 width: calc(100% - 20px) 大多数情况下能工作，但一旦父容器没有明确宽度（比如在 display: flex 的子项里未设 flex-basis），或者元素处于某些 CSS 上下文（如 table-cell、position: absolute 且缺少参照尺寸），百分比部分就无法解析——浏览器会整个丢弃该声明，回退到默认值。
常见错误现象：calc(100% - 1rem) 在根字体大小动态变化时表现不稳定；calc(50% + 1px) 在 Safari 旧版本中可能被忽略；使用 vh/vmin 与百分比混合时，若视口未触发重排，计算结果可能滞后。
- 百分比始终相对于包含块的对应尺寸（
width对应包含块宽，height对应高），不是相对于自身或视口 -
calc()内部不支持函数嵌套，不能写calc(100% - clamp(10px, 1vw, 20px)) - 空格是语法必需的：
calc(100%-20px)无效，必须是calc(100% - 20px)
在 Flex 布局中安全使用 calc(100% - Xpx)
Flex 子项默认有 flex-basis: auto，此时 100% 不指向父容器宽度，而是内容固有宽度，导致 calc(100% - 20px) 实际减的是文字宽度而非容器宽——这是最常踩的坑。
解决方法是显式锁定基准：把 flex-basis 设为 100% 或具体值，并配合 flex-grow: 0 防止拉伸干扰计算。
div.container {
display: flex;
}
div.item {
flex: 0 0 calc(100% - 20px); /* 等价于 flex-basis: calc(100% - 20px); flex-grow: 0; flex-shrink: 0; */
margin-right: 10px;
}
- 避免用
flex: 1同时又设width: calc(...)，二者冲突，后者会被忽略 - 若需留白+自适应，优先考虑
gap而非靠calc()手动减像素 - 在
flex-direction: column中，用height: calc(100% - Xpx)时，父容器必须有明确高度（如height: 100vh）
响应式断点中用 calc() 替代媒体查询做微调
当只需要对某类尺寸做小范围补偿（比如在移动端让卡片左右各留 12px，桌面端留 24px），不必为几像素写一整套 @media，直接用 calc() 混合视口单位更轻量。
例如：让一个宽度随视口变化但始终保留两侧固定边距：
.card {
width: calc(100vw - 24px); /* 移动端：全宽减固定边距 */
}
@media (min-width: 768px) {
.card {
width: calc(100vw - 48px); /* 平板：边距翻倍 */
}
}
- 慎用
vmax或vmin与百分比混算，部分 Android WebView 解析异常 -
calc(100vw - 1em)比calc(100vw - 16px)更安全，因em会随根字体缩放，适配可访问性设置 - 不要在
font-size中用calc(1rem + 0.25vw)同时又在外层用calc()做布局，层级叠加易失控
IE 和旧版 Safari 的兼容性补救策略
calc() 在 IE9+ 和 Safari 6.1+ 支持，但 IE 对空格、括号嵌套、负号前空格极其敏感；Safari 9 之前不支持 vh/vmin 与百分比混用。
真正要兼容 IE11 及以下时，不能只靠 Autoprefixer——它不修复语法问题，只加前缀。必须人工降级：
- 把
calc(100% - 20px)拆成两个规则：width: 100%+margin: 0 10px（等效但语义不同） - 对 IE 使用条件注释或
@supports (width: calc(0px))进行特性检测再覆盖 - 避免在
transform: translateX(calc(-50% - 10px))这类复合场景中混用，IE11 渲染错位
现代项目若已放弃 IE，重点反而是 Safari iOS 14.5 之前对 calc() 在 grid-template-columns 中的解析 bug：写 grid-template-columns: calc(50% - 10px) 1fr 会失效，需改用 grid-template-columns: minmax(0, calc(50% - 10px)) 1fr。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
