calc() 必须遵守单位混合规则和空格语法：加减运算符两侧必须有空格，乘除可省略但建议统一添加；仅支持纯数字与单位运算，不支持双单位运算；百分比高度需父元素有明确高度，否则推荐用vh；结果不会为负值。
calc() 能直接参与宽度、高度等长度类属性的计算，但必须满足单位混合规则和空格语法要求，否则整条声明会被浏览器忽略。
calc() 中加减运算前后必须留空格
浏览器对 calc() 的解析非常严格：只要 + 或 - 两侧缺空格，整个表达式就失效。比如 calc(100%-20px) 看似合理，实际不生效；正确写法是 calc(100% - 20px)。
- 错误示例：
width: calc(100%-10px);→ 声明被丢弃，回退到默认值 - 正确示例：
width: calc(100% - 10px);→ 正常计算剩余宽度 -
*和/两侧可省略空格（如calc(100%/3)），但统一加空格更安全、易读
乘除运算只允许一个操作数带单位
calc() 不支持两个带单位的值相乘或相除，比如 calc(50% * 2em) 是非法的，会触发语法错误。它只接受「纯数字 × 单位」或「单位 ÷ 纯数字」形式。
- 合法：
width: calc(100% / 3);、font-size: calc(1rem * 1.2); - 非法：
height: calc(100vh * 10px);、margin: calc(2em / 10px); - 常见误用场景：想让某元素宽为「父容器宽的 70% 再减去 1em 边距」，应写成
width: calc(70% - 1em);，而非试图用乘法换算单位
高度计算常依赖 vh 或明确父容器高度
单纯写 height: calc(100% - 60px); 很可能没效果，因为百分比高度生效的前提是父元素有明确高度（非 auto）。多数情况下，用 vh 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
height: calc(100vh - 60px);—— 直接基于视口，无需父级设高 - 若必须用百分比，需确保父链上所有祖先都有显式高度，例如：
.parent { height: 500px; }，再在子元素中写height: calc(100% - 40px); - Flex/Grid 容器内，子项高度用
calc()通常能正常工作，因主轴尺寸已由容器约束
最易被忽略的是：即使语法全对，calc() 的结果也不能小于 0。比如 width: calc(100% - 200px) 在容器宽度不足 200px 时，实际渲染宽度会卡在 0，而不是负值——这点在小屏适配时要额外加媒体查询兜底。
