CSS中的calc()函数允许你在声明CSS属性值时执行一些计算。
这个函数可以接受加（+）、减（-）、乘（*)
仅在支持clamp()时作为参数的一部分或与var()结合使用时允许，但直接用于长度或时间等单位时不可行）、除（/，通常与var()结合使用以进行单位换算）四种基本运算。
calc()的结果会被解析为一个CSS长度值、频率值、角度值、时间值等，具体取决于你计算的上下文。
以下是一些calc()函数的使用例子：
长度计算
-
基本加法：
.container {width: calc(100% - 50px); }这会将
.container的宽度设置为视口宽度的100%减去50像素。 -
基本减法：
.margin-adjust {margin-left: calc(20px - 10%); }这会将左边距设置为20像素减去父元素宽度的10%。
-
与变量结合使用：
:root {--base-spacing: 16px; } .box {padding: calc(var(--base-spacing) * 2); }这里，
.box的内边距会被设置为--base-spacing变量值的两倍，即32像素。 -
混合单位（注意：通常不推荐，因为可能导致计算复杂性和浏览器兼容性问题，但技术上可行）：
.complex-calc {width: calc(50% + 3em - 20px); }这个例子中，宽度是父元素宽度的50%、3个em单位（取决于当前字体大小）和20像素的混合计算。
颜色计算（在支持calc()和颜色空间插值的浏览器中）
虽然不常见，但calc()理论上也可以用于颜色计算（主要是在支持这种功能的现代浏览器中，如Chrome的某些版本）：
.gradient-box {background: linear-gradient(to right, calc(red + green), blue);
}
注意：上面的颜色计算例子可能不会按预期工作，因为CSS标准中并没有定义颜色值的加法运算。这个例子主要是为了展示calc()的语法潜力，而非实际用途。在实际应用中，颜色通常通过预定义的变量或混合（mixins）在预处理器（如Sass或Less）中处理。
频率计算
.audio-example {animation-duration: calc(1s * 2);
}
这会将动画持续时间设置为2秒（1秒乘以2）。
角度计算
.rotate-box {transform: rotate(calc(45deg + 30deg));
}
这会将.rotate-box元素旋转75度（45度加上30度）。
注意事项
calc()中的运算符两侧通常需要有空格，以确保CSS解析器正确识别它们是运算符而不是数字或标识符的一部分。calc()函数中的值可以是具体的数字、百分比、em、rem、vw、vh等CSS单位，也可以是CSS变量（使用var()函数）。- 并非所有CSS属性都支持
calc()函数，它主要用于那些接受数值作为值的属性。 - 在使用
calc()时，要注意浏览器兼容性，尤其是较老的浏览器可能不支持这个函数。
