calc()语法极严格：加减号前后必须空格，否则静默失效；不支持单位间乘除；百分比高度需父级显式高度；结果不小于0，小屏易归零，须媒体查询兜底。
calc() 能直接算出宽度，但写错一个空格或混用单位，整条声明就静默失效。
加减号前后必须加空格，否则 calc 完全不工作
浏览器对 calc() 的语法校验极其严格：只要 + 或 - 两侧缺空格，整个表达式会被丢弃，回退到默认值（比如 width: auto），且控制台不会报错，极难排查。
- 错误写法：
width: calc(100%-20px);→ 实际无效，元素按未设置宽度渲染 - 正确写法：
width: calc(100% - 20px);→ 正常计算剩余空间 -
*和/两侧可省略空格（如calc(100%/3)），但统一加空格更安全、易读
不能两个带单位的值相乘或相除
calc() 只接受「纯数字 × 单位」或「单位 ÷ 纯数字」，不支持单位与单位之间的运算。这类错误不会报错，但声明直接被忽略。
- 合法：
width: calc(100% / 3);、font-size: calc(1rem * 1.2); - 非法：
width: calc(50% * 2em);、margin: calc(2em / 10px);→ 整条规则失效 - 想实现「父宽 70% 减去 1em 边距」，只能写成
width: calc(70% - 1em);，别试图用乘法换算单位
百分比高度依赖父级显式高度，多数情况该用 vh
写 width: calc(100% - 40px); 没问题，但若换成 height: calc(100% - 60px);，大概率没效果——因为 % 高度生效的前提是父元素有明确高度（非 auto）。
- 推荐方案：
height: calc(100vh - 60px);→ 直接基于视口，无需父级设高 - 若必须用百分比，需确保父链所有祖先都有显式高度，例如：
.parent { height: 500px; }，再在子元素中写height: calc(100% - 40px); - Flex/Grid 容器内子项高度用
calc()通常能正常工作，因主轴尺寸已被容器约束
结果不会为负，小屏下容易意外归零
calc() 的计算结果有下限：不能小于 0。比如 width: calc(100% - 200px); 在容器宽度不足 200px 时，实际渲染宽度会卡在 0，而不是负值——这在移动端适配时极易导致内容消失。
- 必须配合媒体查询兜底，例如：
@media (max-width: 200px) { width: 0; }或改用min-width限制 - 边框、圆角等场景常用
calc(1px + 0.5vw)这类混合单位组合，既保底又响应，但要注意vw在小屏下可能让边框过粗
最常被忽略的是：语法全对、单位合规、空格到位，仍可能因父级高度缺失或结果归零而“看起来没生效”。调试时优先检查父容器是否设置了 height，再确认视口宽度是否触达了 calc 下限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
