CSS3中的calc()是一个用于动态计算CSS属性值的函数，它允许开发者在设置长度、宽度、高度等数值类型的CSS属性时，直接进行加、减、乘、除四则运算，不需要提前手动算出固定数值，能够让布局适配更多场景。
calc()的基本语法
calc()的语法格式非常简单，核心是在calc()括号内写入运算表达式，表达式的结果会作为对应CSS属性的值，基本格式如下：
/* 基本语法示例 */
.selector {
width: calc(表达式);
}需要注意的是，表达式中的运算符前后必须保留一个空格，否则浏览器可能无法正确解析运算逻辑，比如calc(100%-20px)这种写法是错误的，必须写成calc(100% - 20px)。
calc()支持的运算规则
calc()支持加(+)、减(-)、乘(*)、除(/)四种基础运算，同时支持混合运算，运算时还支持不同单位的数值混合计算，比如百分比可以和像素、rem等单位一起参与运算，具体规则如下：
- 加法和减法：支持任意长度单位混合运算，比如
calc(100px + 2rem)是合法的 - 乘法：只能有一个数值带单位，另一个必须是无单位的数字，比如
calc(100px * 2)合法，calc(100px * 20px)非法 - 除法：除数必须是无单位的数字，且不能为0，比如
calc(100px / 3)合法，calc(100px / 20px)非法 - 混合运算：遵循数学运算的优先级，先乘除后加减，也可以通过括号调整运算优先级
calc()的使用示例
场景1：实现自适应宽度布局
当我们需要一个元素占满父容器宽度，同时左右各留出固定边距时，用calc()可以快速实现，不需要手动计算剩余宽度：
/* 父容器宽度100%，子元素左右各留20px边距 */
.container {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.content {
/* 宽度 = 父容器宽度 - 左右边距总和 */
width: calc(100% - 40px);
height: 200px;
background-color: #f0f0f0;
}场景2：固定高度头部下的内容区自适应
如果页面顶部有一个固定高度60px的导航栏，希望下方内容区占满剩余屏幕高度，用calc()可以轻松实现：
/* 导航栏固定高度 */
.header {
height: 60px;
background-color: #333;
color: #fff;
}
/* 内容区高度 = 屏幕总高度 - 导航栏高度 */
.main-content {
height: calc(100vh - 60px);
background-color: #fff;
overflow-y: auto;
}场景3：多列布局等宽计算
如果需要实现3列等宽布局，列之间间隔20px，用calc()计算每列的宽度非常方便：
/* 3列布局，列间距20px */
.column-wrapper {
width: 100%;
}
.column {
/* 每列宽度 = (总宽度 - 2个间距) / 3 */
width: calc((100% - 40px) / 3);
float: left;
margin-right: 20px;
height: 150px;
background-color: #e8e8e8;
}
/* 最后一列去掉右边距 */
.column:last-child {
margin-right: 0;
}calc()的使用注意事项
- 运算符前后必须加空格，这是最常见的错误，很多解析问题都是因为漏写空格导致的
- calc()内部的表达式可以嵌套使用，比如
calc(calc(100% - 20px) / 2)，不过一般建议简化表达式，避免不必要的嵌套 - calc()的兼容性较好，现代浏览器基本都支持，如果需要兼容非常老的浏览器，可以添加前缀写法，比如
-webkit-calc()、-moz-calc() - calc()计算的结果会在渲染时动态计算，所以如果依赖的父元素尺寸发生变化，calc()的结果也会自动更新，不需要手动重新计算
calc()是CSS3中非常实用的工具函数，合理使用可以大幅减少布局时的手动计算工作，提升代码的灵活性和可维护性，建议在日常布局中多尝试使用。