css calc()是CSS3引入的一个用于动态计算CSS属性值的函数，它允许开发者在声明CSS属性时直接进行数学运算，支持加、减、乘、除四种基础运算，还能混合使用不同的CSS单位，避免了手动计算数值的繁琐，也让样式适配更灵活。
calc()的基本语法规则
calc()的使用格式为calc(表达式)，表达式中的运算符前后必须保留一个空格，否则会导致计算失效。比如做加法运算时，不能写成calc(100px+20px)，必须写成calc(100px + 20px)。同时calc()支持的单位包括px、em、rem、%、vw、vh等常见CSS单位，不同单位也可以混合运算。
基础运算示例
/* 加法运算，计算元素总宽度 */
.box {
width: calc(100% + 20px);
}
/* 减法运算，元素宽度减去两侧边距 */
.sidebar {
width: calc(300px - 40px);
}
/* 乘法运算，注意乘法运算符两侧至少有一个是数值，不能是单位值相乘 */
.text {
font-size: calc(1rem * 1.5);
}
/* 除法运算，除数必须是数值，不能是单位值 */
.container {
padding: calc(20px / 2);
}
calc()的常见使用场景
1. 响应式布局中的尺寸适配
在做响应式布局时，经常需要让元素的宽度占满父容器同时减去固定的边距或者内边距，这时候用calc()可以直接实现，不用写复杂的媒体查询适配。
/* 内容区域宽度占满父容器，减去左右各20px的内边距 */
.content {
width: calc(100% - 40px);
margin: 0 auto;
}
/* 两栏布局，侧边栏固定200px，主内容区占剩余宽度 */
.main {
width: calc(100% - 200px);
float: left;
}
2. 处理固定尺寸和动态尺寸的混合需求
比如需要让元素的高度是视口高度减去顶部导航栏的固定高度，用calc()可以直接计算，不用通过JS动态获取导航栏高度再赋值。
/* 导航栏固定高度60px，页面主体高度占剩余视口高度 */
.nav {
height: 60px;
}
.page-body {
height: calc(100vh - 60px);
}
3. 字体大小或者间距的动态计算
可以结合根元素的字体大小或者其他动态单位，计算需要的字体大小或者间距，让样式的适配性更强。
/* 根元素字体大小为16px，标题字体大小是根元素的1.25倍 */
html {
font-size: 16px;
}
h1 {
font-size: calc(1rem * 1.25);
}
/* 卡片内边距是根元素字体大小的0.5倍 */
.card {
padding: calc(0.5rem * 2);
}
calc()的注意事项
- 运算符前后必须加空格，尤其是减号和加号，否则浏览器无法识别表达式。
- 除法运算时，除数必须是无单位的数值，不能带px、%等单位，比如
calc(100px / 2)是合法的，calc(100px / 2px)是非法的。 - 乘法运算时，两个乘数不能同时带单位，至少有一个是无单位的数值，比如
calc(10px * 2)合法，calc(10px * 2px)非法。 - calc()的兼容性较好，主流现代浏览器都支持，如果需要兼容非常老的浏览器，可以搭配降级方案使用。
calc()函数的核心价值是让CSS具备了动态计算的能力，减少了样式开发中对固定数值的依赖，也让响应式适配的实现更加简洁高效，是前端样式开发中非常实用的工具。