CSS 中的一个常用计算函数是 calc(), 允许你在声明CSS属性值时执行简单的计算。calc() 函数可以帮助开发人员基于其他尺寸、百分比或者静态单位来动态计算出准确的值。以下是一些关于 calc() 函数的基本要点：

用途：

• 通过在CSS中执行实时计算，可以更灵活地调整布局和尺寸。
• 可以应用于任何接受 <length>, <frequency>, <angle>, <time>, <percentage>, <number> 或 <integer> 类型值的属性。

语法：

property: calc(expression);

其中，expression 是一个包含加（+）、减（-）、乘（*）和除（/）运算符的表达式。请注意，运算符两边必须要有空格，例如 width: calc(100% - 10px);

示例：

计算一个元素宽度使其比其父容器窄10像素：

.example {
  width: calc(100% - 10px);
}

计算高度为视窗高度减去固定导航栏的高度：

.content {
  height: calc(100vh - 50px);
}

注意事项：

• calc() 表达式中的单位必须兼容，例如你不能将百分比和像素直接相加减，但可以分别计算后合并。
• 不适合频繁变动的复杂计算，因为它可能会导致额外的布局重排和重绘，从而影响页面性能。
• 对所有浏览器都完全支持 calc()，但在现代浏览器中广泛得到支持。

除了 calc()，还有其他一些相关的计算或动态调整样式的函数，例如在响应式设计中使用的 min()、max() 和 clamp() 函数，它们也能帮助计算并限制CSS属性值的范围。不过，这些函数相对 calc() 较新，可能在较早版本的浏览器中不被支持。