calc()中百分比与px混用完全合法，需单位完整、空格规范；失效多因父容器无宽高参照；推荐flex gap替代手动calc减法，避免嵌套与视口单位兼容问题。
calc() 里百分比和 px 混用是否合法
完全合法，calc() 的设计初衷就是解决这类混合计算问题。浏览器在计算时会先解析单位，把 %（相对于父容器宽度）和 px（绝对值）统一为同一维度的数值再运算。但注意：不能直接写 calc(100% + 20)——漏掉单位会报错，必须是 calc(100% + 20px)。
常见错误：margin 或 padding 中 calc 失效
失效往往不是 calc() 本身的问题，而是父容器没设宽高，导致 % 无参照。比如给子元素设 width: calc(100% - 40px)，若父元素是 display: inline 或未设 width，100% 就算不出来。
- 确保父容器有明确宽度（如
width: 100%、max-width: 1200px，或由 flex/grid 容器提供约束） - 避免在
height: calc(100% - 60px)中依赖%高度，除非父元素有固定height或min-height - 慎用
calc()做font-size：部分旧版 Safari 对calc(1rem + 0.5vw)渲染不稳定
响应式侧边栏+主内容布局的实际写法
这是最典型的使用场景：左侧固定 240px 导航栏，右侧自适应，且留出 16px 间隙。
.container {
display: flex;
}
.sidebar {
width: 240px;
}
.main {
flex: 1;
width: calc(100% - 240px - 16px); /* 注意减去 gap */
}
但更推荐用 gap + flex 替代手动减法，因为：
-
calc()在 flex 容器中可能被重计算多次，尤其在窗口 resize 时 - 如果未来改间隙为 24px，要同步改两处（
gap和calc） - 真正需要
calc()的地方是：当必须绕过 flex/gap 限制，比如绝对定位元素的left或transform
兼容性与运行时陷阱
现代浏览器都支持 calc()，但要注意两点：
- 空格不可省：
calc(100%-20px)无效，必须是calc(100% - 20px) - 嵌套不支持：
calc(calc(100% - 20px) / 2)会报语法错误，需提前算好系数，比如calc(50% - 10px) - IE11 支持
calc()，但不支持vh/vmin等视口单位参与运算（如calc(100vh - 80px)在 IE11 里会被忽略）
最易被忽略的是：calc() 不会触发重排优化，频繁用于 top、left 动画时性能不如 transform。真要动效，优先考虑 transform: translateX(calc(...))，它走合成层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
