calc()中加减号两侧必须空格，否则语法错误；乘除号两侧禁止空格；配合min-width:0防换行，clamp()可防负宽并支持三段响应式控制。
calc() 里加减号两边必须空格，否则整个值失效
浏览器把 calc(100%-20px) 当作非法值，不是逻辑错，是语法崩了。CSS 解析器严格要求 + 和 - 两侧必须有空格，* 和 / 左右则禁止空格（括号内除外）。
-
calc(100% - 20px)✅ 安全，所有现代浏览器识别 -
calc(100% -20px)❌ 多数场景退为auto或初始值，右侧栏直接换行 -
calc(100vw/375*16)❌ Chrome 120+ 才开始松动容忍，别赌兼容性
两栏布局中 calc() 最稳的用法：固定侧边栏 + 主区动态缩放
别用 calc() 算高度或响应滚动，它只做声明时的一次静态运算。真正靠谱的场景是宽度微调——尤其当你有固定宽的导航栏、工具栏时。
- 左侧固定 240px：
.sidebar { width: 240px; } - 右侧主区用
calc(100% - 240px)，但必须确保父容器有明确width或max-width - 若右侧还带
margin-left: 20px，就得写成width: calc(100% - 240px - 20px)，否则总宽超限导致换行 - 搭配
display: flex更省心：flex: 0 0 calc(100% - 240px)
三栏布局中 calc() 容易被忽略的关键：min-width: 0
移动端下 calc(100% - 480px) 宽度可能被 viewport 缩放破坏，某些安卓 WebView 或老版 iOS Safari 在缩放页面时，100% 会按视觉视口计算，导致中间栏变窄甚至换行。
- 解决方案不是去掉
calc()，而是加一行min-width: 0到中间栏 .content { width: calc(100% - 480px); min-width: 0; }- 这个
min-width: 0很容易被忽略，但它决定了calc()算出来的宽度能否真正生效——尤其当内容里有长单词或未折行的 URL 时
clamp() 配合 calc() 才能防负宽，单纯 calc() 做留白很危险
单纯靠 calc(100% - 200px) 做侧边栏留白，在小屏下容易负宽。这时候硬加 min-width 不如直接上 clamp()：它能定义最小值、首选值、最大值三段逻辑，而 calc() 可以作为其中任一参数参与计算。
立即学习“前端免费学习笔记（深入）”；
- 例如实现“最小 320px，最大 600px，中间按视口比例缩放”：
width: clamp(320px, calc(100vw - 40px), 600px); -
clamp()的三个参数单位不必相同，但中间值（首选值）必须是可计算的长度值 -
IE不支持clamp()，需要降级 fallback（比如先写width: 100%，再覆盖） - 别在
clamp()里塞太重的calc()，比如calc((100vw - 200px) / 3 * 2)——浏览器解析负担增大，动画时可能卡顿
