calc()函数可在CSS中实现动态计算，支持加减乘除运算，常用于响应式布局；如设置width: calc(100% - 20px)解决固定侧边栏与自适应主内容区共存问题，结合不同单位灵活调整元素尺寸，提升布局灵活性。
CSS本身不支持直接的数学运算，但通过calc()函数，可以在属性值中进行动态计算。这个函数允许你在设置宽度、高度、边距等属性时，混合使用不同的单位进行加减乘除运算，非常实用。
calc() 函数的基本语法
calc() 的语法很简单：在CSS属性值中使用 calc(表达式)，表达式里可以包含加（+）、减（-）、乘（*）、除（/）运算。注意运算符前后需要加空格，否则会报错。
例如：
width: calc(100% - 20px); margin-left: calc(50vw / 2); height: calc(100vh - 10rem);
常用使用场景
在实际开发中，calc() 常用于解决布局中的“差值”问题，尤其是在响应式设计中。
立即学习“前端免费学习笔记（深入）”；
- 固定侧边栏 + 自适应主内容区：当页面有一个固定宽度的侧边栏（如200px），主内容区想占满剩余空间时：
.main-content {
width: calc(100% - 200px);
float: right;
}
- 居中带偏移的元素：你想让一个元素水平居中，但再向右移动10px：
.element {
left: calc(50% + 10px);
transform: translateX(-50%);
position: relative;
}
- 响应式字体大小或间距：结合视口单位和固定值调整文字大小：
h1 {
font-size: calc(1.5rem + 2vw);
}
这样字体大小会随着屏幕变化平滑调整。
注意事项和限制
calc() 很强大，但也有一些细节需要注意：
- 乘法和除法只能与数字相乘或相除，不能两个单位相乘（如
10px * 10px是无效的）； - 加减运算的两边必须有相同类型单位才能正确解析（但
calc允许混合单位，比如%和px）； - 不要忘记运算符前后的空格 ——
calc(100%-20px)是错误的，必须写成calc(100% - 20px)； - 支持嵌套：
calc()内部还可以包含另一个calc()，浏览器会自动扁平化处理。
基本上就这些。calc() 是现代CSS中不可或缺的工具，尤其在构建灵活布局时特别有用。只要记住语法细节，就能避免大部分常见错误。
