calc() 是 CSS 原生计算函数，支持宽高、字体等动态计算，语法需空格分隔、单位混用有限制，不可嵌套，不适用于非长度属性，IE9+ 支持。

calc() 是 CSS 提供的原生计算函数，它让 HTML 元素的宽高、边距、字体等尺寸能根据上下文动态算出，不用 JS 就能实现响应式效果。关键在于写对语法、选对单位、避开常见坑。

宽高计算的基本写法

直接在 width 或 height 属性里用 calc()，表达式里可以混用单位：

• 宽度占满父容器但左右各留 20px： width: calc(100% - 40px);
• 高度减去固定头部高度（比如 60px 导航栏）： height: calc(100vh - 60px);
• 三等分布局，两处间距共 20px： width: calc((100% - 20px) / 3);

支持的单位和运算规则

calc() 能把不同单位“加在一起”，但不是所有组合都合法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 支持：% + px、rem + vw、vh - em、100% / 3
• ❌ 不支持：50% * 2em（乘除时只能一个操作数带单位，另一个必须是纯数字）
• ⚠️ 必须空格：写成 calc(100%-20px) 会失效，正确是 calc(100% - 20px)（+ - * / 前后都要空格）

配合 HTML 结构的实际用例

比如一个卡片容器，希望它在不同屏幕下自动缩放又保持内边距稳定：

立即学习“前端免费学习笔记（深入）”；

• HTML：<div class="card"></div>
• CSS：.card { width: calc(100% - 2rem); padding: 1rem; font-size: calc(1rem + 0.5vw); }
• 说明：宽度随父容器变窄（减掉 2rem 的左右余量），字体在基础 rem 上叠加 vw，小屏不缩太小，大屏不撑太开

常见踩坑提醒

有些地方看着合理，但浏览器不认：

• calc() 不能用在 z-index、line-height（除非值是长度单位）、background-position 等非长度属性上
• 嵌套 calc() 不被支持，比如 calc(calc(100% - 20px) / 2) 会报错
• IE9+ 支持，但 IE8 及更早版本完全不识别，如需兼容得加 fallback