calc()函数可进行动态尺寸计算，支持混合单位运算；使用时需注意运算符前后空格，可用于自适应布局、响应式高度及栅格间距控制。
CSS 的 calc() 函数是一个非常实用的工具，能够让我们在设置元素尺寸时进行动态计算。它支持加（+）、减（-）、乘（*）和除（/）运算，并可以混合使用不同单位，比如像素（px）、百分比（%）、视窗单位（vw/vh）等，从而实现灵活的响应式布局。
基本语法与规则
calc() 的基本写法是：calc(表达式)，其中表达式可以包含数值和单位的组合。注意：
- 运算符前后必须有空格，例如 calc(100% - 20px) 是正确的，而 calc(100%-20px) 会失效。
- 可以混合使用相对单位和绝对单位，这是它最强大的地方。
- 支持嵌套，例如 calc(100vh - calc(50% + 20px))。
实现自适应宽度布局
常见场景是让一个元素占据剩余宽度。比如侧边栏固定为 200px，主内容区自动填充剩余空间：
.container {display: flex;
}
.sidebar {
width: 200px;
}
.main-content {
width: calc(100% - 200px);
}
这样无论容器多宽，主内容区都能动态调整尺寸。
立即学习“前端免费学习笔记（深入）”；
结合视窗单位实现响应式高度
希望某个元素的高度等于整个视窗高度减去头部导航的高度，可以这样写：
header {height: 60px;
}
.content-area {
height: calc(100vh - 60px);
overflow-y: auto;
}
这在全屏布局或后台管理系统中特别有用，确保内容区域不会被遮挡。
灵活设置间距与栅格
在没有使用 Flex 或 Grid 的情况下，可以用 calc() 手动实现等分布局。例如创建三列布局，每列之间有 20px 间隔：
.column {width: calc((100% - 40px) / 3);
margin-right: 20px;
}
.column:last-child {
margin-right: 0;
}
这里通过减去总间隙（两个 20px 间距）再均分，实现视觉上均匀的三栏。
基本上就这些。calc() 让 CSS 尺寸更智能，减少对 JavaScript 或复杂布局模型的依赖，特别适合需要精确控制又保持响应性的场景。不复杂但容易忽略细节，比如空格和单位混用规则，写的时候多留意就行。
