calc() 不能直接用于 HTML，它是 CSS 动态计算函数，须写在支持的 CSS 属性值中；需注意空格规范、禁止嵌套、配合 flex/grid 微调布局，并用 @supports 提供降级。
calc() 在 HTML 布局中到底能不能直接用？
不能。calc() 不是 HTML5 的函数，也不是 JavaScript 函数，它是 CSS 中的动态计算函数，必须写在 CSS 属性值里（比如 width、left、margin），不能出现在 HTML 标签属性或内联事件中。
哪些 CSS 属性支持 calc()？常见误用场景
支持 calc() 的属性需接受长度、百分比、数值等可计算值。典型支持项包括：width、height、padding、margin、top、left、font-size、grid-template-columns 等。不支持的有：display、position、z-index（除非是带单位的长度值，但实际无意义）。
- 错误写法：
style="width: calc(100% - 20px)"
—— 这段代码本身语法正确，但若写在 HTML 的style属性里，浏览器能解析；问题常出在空格缺失或单位混用 - 常见报错：
Invalid property value，多因加减号前后缺空格，如calc(100%-20px)（必须写成calc(100% - 20px)） - 不能嵌套：
calc(calc(100% - 20px) / 2)是非法的，CSS 不支持嵌套调用
calc() 与 flex/grid 布局的配合要点
单独靠 calc() 做响应式布局容易失控，它更适合微调固定偏移（如侧边栏定宽 + 主内容自适应），而非替代现代布局方案。
- 搭配
flex时，calc()通常用于flex-basis或容器width，避免和flex-grow冲突 - 在
grid中最实用：grid-template-columns: 250px calc(100% - 250px);
可实现“固定侧边栏 + 自适应主区” - 注意视口单位兼容性：
calc(100vh - 60px)在 iOS Safari 旧版本中可能计算异常，建议加min-height: -webkit-fill-available兜底
浏览器兼容性与 fallback 处理
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）都支持 calc()，但 IE10/11 仅支持 width 等少数属性，且不支持 max()/min() 等新扩展。
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 JS 动态拼接
calc()字符串再塞进style——容易 XSS 且无必要 - 需要降级时，用 CSS @supports 判断：
@supports (width: calc(100% - 20px)) { .box { width: calc(100% - 20px); } } - 慎用单位混合：虽然
calc(1em + 10px)合法，但在 font-size 动态变化时可能导致意料外缩放，优先考虑 rem 或 viewport 单位
真正卡住人的往往不是语法，而是忘了 calc() 的计算发生在样式层，它不感知 DOM 结构变化，也不触发重排优化——该用 flex 或 grid 解决的，硬套 calc() 只会让维护变重。
