CSS中的calc()函数是用于动态计算CSS属性值的数学表达式函数，允许开发者在设置样式时执行加减乘除运算，支持混合不同单位的数值，能够有效解决很多动态样式计算的需求，在响应式布局、自适应间距等场景中应用十分广泛。
calc()的基本语法
calc()函数的语法格式非常简单，核心结构是在calc()括号内写入数学表达式，表达式的计算结果会作为对应CSS属性的值。需要注意运算符前后必须保留一个空格，否则表达式会解析失败。
基础语法示例：
/* 正确的写法，运算符前后有空格 */ width: calc(100% - 20px); /* 错误的写法，运算符前后没有空格，浏览器无法解析 */ width: calc(100%-20px);
支持的运算类型
calc()支持四则运算，包括加法（+）、减法（-）、乘法（*）、除法（/），不同类型的运算有不同的使用限制：
- 加法和减法：支持混合不同单位的数值，比如百分比和像素、rem和像素等组合，只要运算结果的单位是有效的CSS数值单位即可。
- 乘法：乘号两侧必须有一个是数值（无单位），不能两个都是带单位的数值，比如calc(10px * 2)是合法的，calc(10px * 5px)是非法的。
- 除法：除号右侧必须是无单位的数值，不能是带单位的数值，比如calc(100px / 2)是合法的，calc(100px / 20px)是非法的。
常见使用场景
1. 自适应布局宽度计算
在响应式布局中，经常需要让元素宽度占满父容器剩余空间，比如左侧固定宽度导航，右侧内容区自适应，就可以用calc()计算右侧宽度：
/* 左侧导航固定200px宽度 */
.sidebar {
width: 200px;
float: left;
}
/* 右侧内容区占满剩余宽度，减去左侧导航的宽度和两侧各10px的间距 */
.content {
width: calc(100% - 200px - 20px);
float: left;
margin: 0 10px;
}
2. 元素居中偏移计算
实现绝对定位元素的居中时，除了使用transform属性，也可以用calc()计算left或top的值：
/* 宽度300px的元素水平居中 */
.center-box {
position: absolute;
width: 300px;
left: calc(50% - 150px);
top: 50%;
transform: translateY(-50%);
}
3. 动态间距和尺寸调整
当需要根据根字体大小动态调整元素的内边距或外边距时，可以混合rem和px单位计算：
/* 内边距为根字体大小的1倍加上10px的固定间距 */
.card {
padding: calc(1rem + 10px);
margin-bottom: calc(0.5rem + 5px);
}
使用注意事项
- 运算符前后必须保留空格，这是最常见的错误原因，尤其是减号和加号，没有空格会导致整个表达式失效。
- calc()内部的表达式可以嵌套使用，比如calc(calc(100% - 20px) / 2)，但嵌套时也要注意每个运算符的空格规则。
- 不是所有CSS属性都支持calc()，目前主流的现代浏览器都支持calc()，但在一些非常老旧的浏览器（如IE8及以下）中不支持，如果需要兼容旧浏览器需要做降级处理。
- calc()中使用的单位必须是CSS支持的有效单位，比如px、%、rem、em、vh、vw等，不支持自定义单位或者无效的单位。
- 除法运算时，右侧的除数必须是无单位数值，且不能为0，否则表达式会解析失败。
兼容性说明
calc()是CSS3的标准特性，目前所有主流现代浏览器（Chrome、Firefox、Safari、Edge等）都提供了完整支持，在移动端浏览器上兼容性也很好。如果需要兼容IE9和IE10，需要添加前缀写法：-webkit-calc()、-moz-calc()，不过现在大部分项目已经不需要兼容这些老旧浏览器，直接使用标准calc()即可。
/* 兼容旧浏览器的写法 */
.old-compatible {
width: -webkit-calc(100% - 20px);
width: -moz-calc(100% - 20px);
width: calc(100% - 20px);
}