calc()支持+、-、*、/四则运算，加减要求至少一个操作数为相对单位或无单位数，乘除要求一操作数为无单位数；需注意上下文尺寸、空格及兼容性。
calc() 函数支持哪些运算符和单位组合？
calc() 支持 +、-、*、/ 四则运算，但有硬性限制：加减运算的左右操作数必须是**可比较的单位类型**（比如都是长度、都是百分比），不能混用 px 和 % 直接相加——但 calc(50% + 20px) 是合法的，因为 % 是相对于父容器的相对单位，px 是绝对单位，CSS 引擎允许这种混合，前提是加减项中**至少有一个是相对单位或无单位数值**（如 1）。乘除则要求：一个操作数必须是无单位数字（2、0.5），另一个是带单位值（100px、50%），例如 calc(100px * 2) 或 calc(100% / 3) 合法，而 calc(100px * 20px) 会报错。
为什么 calc(100% - 40px) 有时不生效？
常见原因不是语法错，而是计算上下文缺失。比如给 width 写 calc(100% - 40px)，但父元素没设 width 或是 display: inline，导致 100% 无法解析为具体像素值；又或者元素本身是 position: absolute 且未设 left/right，此时 width: 100% 默认按内容撑开，calc() 就失去参照基准。另外注意空格：calc(100%-40px)（无空格）在部分旧版 Safari 中会解析失败，必须写成 calc(100% - 40px)。
- 确保父容器有明确尺寸（
width、max-width或flex-basis等） - 避免在
display: inline元素上依赖100%宽度计算 - 在 Flex/Grid 容器中，
100%默认指主轴剩余空间，行为更可控
calc() 在响应式布局中怎么替代媒体查询？
它不能完全替代媒体查询，但能减少简单场景下的断点数量。比如侧边栏固定宽 240px，主内容区想占满剩余宽度，直接写 width: calc(100% - 240px) 就行，无需为每个屏幕宽度写 @media。再比如字体大小随视口变化：font-size: calc(1rem + 0.5vw)，让文字在小屏偏小、大屏略大，平滑过渡。但要注意：vw/vh 是视口单位，和父容器无关；而 % 始终相对于父元素，二者混用时逻辑容易错乱。
-
calc(1rem + 0.25vw)比纯vw更稳妥，避免极小屏下文字过小 - 避免嵌套
calc(calc(...))，CSS 不支持，会直接失效 - 在 Grid 的
grid-template-columns中用calc()很实用，比如grid-template-columns: 200px calc(100% - 200px)
calc() 的浏览器兼容性和性能影响
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）都支持 calc()，IE9+ 仅支持加减（不支持乘除）。性能上，calc() 是 CSS 运行时计算，只要不涉及频繁重排（如监听 window.resize 动态改 style），开销几乎可忽略。但若在大量元素上滥用复杂表达式（如 calc((100% / 3) - 1px) 套多层括号），可能轻微拖慢样式计算，尤其低端移动设备。
真正容易被忽略的是：当 calc() 里用了无效值（如 calc(100% + auto)），整个声明会被静默丢弃，开发者工具里该属性会显示为 strike-through 灰色，但不会报错提示——得靠肉眼检查 computed styles 是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
