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() 能把不同单位“加在一起”，但不是所有组合都合法：
- ✅ 支持：% + px、rem + vw、vh - em、100% / 3
- ❌ 不支持：50% * 2em（乘除时只能一个操作数带单位，另一个必须是纯数字）
- ⚠️ 必须空格：写成 calc(100%-20px) 会失效，正确是 calc(100% - 20px)（+ - * / 前后都要空格）
配合 HTML 结构的实际用例
比如一个卡片容器，希望它在不同屏幕下自动缩放又保持内边距稳定：
- HTML：
- 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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
