calc()失效主因是加减号两侧缺空格，导致整条声明被静默丢弃；乘除运算要求一侧为纯数字，且0必须带单位，否则类型推导失败。
calc() 里加减号两侧必须有空格
浏览器解析 calc() 时，+ 和 - 是运算符，不是单位符号。如果写成 width: calc(100%-20px)，会被当成一个无效的维度值（类似 100%-20px 这种非法标识符），整条声明直接失效，退回到默认宽度。
正确写法是：两侧强制加空格 —— width: calc(100% - 20px)、margin-left: calc(50% - 100px)。
- 空格不可省略，哪怕只少一个也会失败
-
*和/两侧也建议加空格，虽非强制，但统一风格更安全 - 编辑器自动补全或 CSS 压缩工具可能删空格，上线前务必检查
乘除运算有单位限制，不能两个都带单位
calc() 的乘除不是任意组合：乘法要求一侧是纯数字，除法要求右侧（除数）必须是纯数字。否则解析报错，属性不生效。
常见错误写法：width: calc(200px * 20px)（两个单位）、height: calc(100vh / 20px)（除数带单位）—— 这些在任何浏览器里都不起作用。
- ✅ 正确乘法：
width: calc(100% * 2)、font-size: calc(16px * 1.5) - ✅ 正确除法：
width: calc(100% / 3)、padding: calc(60px / 2) - ⚠️ 注意：
calc(50vw * 2)合法，但calc(50vw * 2rem)非法
用 calc 实现“占满剩余宽度”的典型场景
最常用的是侧边栏 + 主内容区布局，比如固定宽 240px 的导航栏，主区域填满剩下空间：
.sidebar { width: 240px; float: left; }
.main { width: calc(100% - 240px); float: left; }
这个逻辑依赖父容器是块级且宽度明确（比如 width: 100% 或 display: flex）。如果父容器本身宽度不确定（如 display: inline-block 且无显式宽），100% 就没意义。
- Flex/Grid 中优先用
flex: 1或grid-template-columns: 240px 1fr，更语义清晰 - 用
calc()时，确保父元素盒模型干净（box-sizing: border-box，无意外padding干扰） - 若需留出滚动条宽度，可用
calc(100% - 17px)（但更推荐用overflow: overlay或 JS 动态测）
响应式字体和高度计算容易忽略父容器约束
font-size: calc(16px + 2vw) 没问题，但 height: calc(100vh - 60px) 会失败，如果父元素没设 height 或 min-height，而你又把它放在普通文档流里。
例如：.content { height: calc(100vh - 80px); } 在 body 里直接使用，多数情况 OK；但如果它嵌套在某个 div 内，而该 div 没设高，那 100vh 仍有效，但 100% 就失效了 —— 这点常被混淆。
-
vh/vw基于视口，不依赖父容器，可放心用 -
%单位一定依赖父元素有明确高度（不是auto），否则计算结果为 0 - 动态字体慎用
rem+vw组合，因根字体大小变化会影响整体缩放节奏
实际写的时候，别堆复杂表达式。一个 calc() 里最多两三个运算，超过就拆成变量或换 JS 控制。浏览器解析快，但人眼维护慢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
