calc() 是 css 函数，必须写在 css 声明中（如 style 属性或样式表），且加减号前后必须有空格；不能用于 html 属性，乘除法无空格要求但单位规则更严，嵌套实为括号，推荐用自定义属性拆分复杂计算。
直接说结论：calc() 不是 HTML 功能，是 CSS 函数，必须写在 CSS 声明里（比如 style 属性或样式表中），不能在 HTML 标签属性里直接用。
calc() 必须写在 CSS 里，不是 HTML 属性
常见错误是试图在 HTML 的 width、style（不带引号或语法错）等地方硬塞 calc(100%-20px)，结果完全无效。它只在 CSS 解析上下文中起作用。
-
style="width: calc(100% - 20px);"✅ 可以（注意引号和空格） -
width="calc(100% - 20px)"❌ 无效 —— HTMLwidth属性只接受数字或百分比，不解析 CSS 函数 -
style=width:calc(100%-20px)❌ 缺少引号 + 运算符无空格，浏览器直接丢弃整条声明
加减号前后必须有空格，否则整个 calc 失效
这是最常踩的坑：CSS 解析器把 100%-20px 当作一个非法维度值（类似 100%20px），直接跳过该声明，控制台也不会报错，你只会发现样式“没生效”。
- ✅ 正确：
width: calc(100% - 20px);、margin: calc(1em + 4px); - ❌ 错误：
width: calc(100%-20px);、left: calc(-50%+10px); - 乘除法没空格要求，但单位规则更严 ——
*左右不能都带单位，/右边必须是纯数字
和 CSS 自定义属性（--var）一起用时要小心括号和类型
你可以用 var(--gap) 参与 calc()，但必须确保变量本身是合法的 CSS 值（比如 --gap: 12px），且表达式结构清晰。
- ✅ 安全写法：
--gap: 12px; width: calc(100% - var(--gap)); - ⚠️ 风险写法：
--gap: 12; width: calc(100% - var(--gap) * 1px);—— 虽然能运行，但可读性差，易漏单位 - ❌ 错误写法：
--gap: 12px; width: calc(100% - var(--gap)px);——var(--gap)px是非法拼接，不是字符串连接
calc() 嵌套其实只是括号，不是真函数调用
像 calc(100% / calc(3 * 10px)) 看似嵌套，实际等价于 calc(100% / (3 * 10px))。浏览器只把它当普通括号处理，不会二次解析内层 calc()。
- 所以没必要多套一层
calc()，除非是为了语义清晰或配合预处理器逻辑 - 但要注意：括号内仍需遵守空格规则，比如
calc((100% - 20px) / 2)中的减号两边也要空格 - 复杂计算建议拆成多个自定义属性，比堆
calc()更易维护
真正麻烦的从来不是怎么写对，而是忘记空格、混淆 HTML/CSS 边界、或者在变量未定义时让整个 calc() 退化为初始值 —— 这些问题都不会报错，只会在页面上静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
