CSS中的calc()函数允许你在声明CSS属性值时执行一些计算。

这个函数可以接受加（+）、减（-）、乘（*)

仅在支持clamp()时作为参数的一部分或与var()结合使用时允许，但直接用于长度或时间等单位时不可行）、除（/，通常与var()结合使用以进行单位换算）四种基本运算。

calc()的结果会被解析为一个CSS长度值、频率值、角度值、时间值等，具体取决于你计算的上下文。

以下是一些calc()函数的使用例子：

长度计算

  1. 基本加法：
.container {
  width: calc(100% - 50px);
}

这会将.container的宽度设置为视口宽度的100%减去50像素。

  1. 基本减法：
.margin-adjust {
  margin-left: calc(20px - 10%);
}

这会将左边距设置为20像素减去父元素宽度的10%。

  1. 与变量结合使用：
:root {
  --base-spacing: 16px;
}
.box {
  padding: calc(var(--base-spacing) * 2);
}

这里，.box的内边距会被设置为--base-spacing变量值的两倍，即32像素。

  1. 混合单位（注意：通常不推荐，因为可能导致计算复杂性和浏览器兼容性问题，但技术上可行）：
.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()时，要注意浏览器兼容性，尤其是较老的浏览器可能不支持这个函数。