calc()能解决width: 100% - 20px无效的问题，因为css不支持裸写运算表达式，而calc()是唯一被规范允许在属性值中混用%、px等单位并自动处理优先级和空格的函数。
calc() 为什么能解决 width: 100% - 20px 这种写法无效的问题
直接写 width: 100% - 20px 会报 CSS 语法错误——CSS 不支持裸写运算表达式。浏览器只认标准声明，而 calc() 是唯一被规范允许在属性值中做混合单位计算的函数。它的核心能力是：在同一表达式里安全混用 %、px、em、rem 等不同单位，且自动处理优先级和空格要求。
注意：+ 和 - 两侧必须有空格，否则解析失败；* 和 / 两侧可无空格，但建议统一加空格提升可读性。
实际布局中怎么写才不踩坑
常见场景是「父容器铺满，子元素留左右边距后占满剩余宽度」，比如带 padding 的卡片内部内容区。
-
width: calc(100% - 40px)—— 正确：减去左右各 20px 边距 -
width: calc(100% -20px)—— 错误：减号后缺空格，整个声明被忽略 -
width: calc(100% - 20)—— 错误：漏掉单位px，数值无意义 -
width: calc(100% - 20px - 2em)—— 合法：支持多单位混算，但注意em基于当前字体大小，可能引发意外缩放
哪些 CSS 属性支持 calc()，哪些不支持
支持的属性远不止 width：包括 height、margin、padding、font-size、left/top 等偏移量、grid-template-columns 中的轨道尺寸等。但以下情况会失效：
- 作为
@media查询条件中的值（如@media (min-width: calc(500px + 1em))❌ 不合法） - 在
background-position中用于单个偏移量时，部分旧版 Safari 对负值calc()支持不稳定 - 在
transform: translateX(calc(100% - 20px))中，Chrome 早期版本有渲染抖动，现代浏览器已修复
IE 和移动端兼容性要特别注意什么
IE9+ 支持 calc()，但必须带厂商前缀 -webkit-calc() 和 -moz-calc() 才能在旧版 Firefox/Chrome 生效；不过 IE9 不支持 calc() 在 font-size 中使用。
移动端基本无压力（iOS Safari 6.1+、Android Browser 4.4+），但如果你项目还需兼容微信内置浏览器 X5 内核（尤其 Android 旧版），要避免在 grid 或 flex-basis 中嵌套过深的 calc() 表达式——某些 X5 版本对括号嵌套解析异常。
真正容易被忽略的是：当父元素 width 本身是 calc() 计算所得时，子元素再用 calc(100% - ...)，部分安卓 WebView 会取到未更新的父宽，导致错位。此时建议改用 flex 布局或 container 查询替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
