CSS calc()

它是一个内置的 CSS 函数，允许我们执行计算。它可以用来计算长度、百分比、时间、数字、整数频率或角度。它使用了四个简单的算术运算符：加 (+)、乘 (*)、减 (-)、除 (/)。

这是一个强大的 CSS 概念，因为它允许我们混合任何单位，例如百分比和像素。

语法

值

这个 CSS 函数接受一个单独的参数 *expression*，该数学表达式的结果将作为值使用。它可以是使用四个算术运算符（+、-、*、/）的任何简单表达式。表达式是必须定义的。

要点

• 加法 (+) 和减法 (-) 运算符必须始终用空格包围。否则，表达式将被视为无效表达式。例如，**calc(60%-4px)** 将是无效的，因为它被解析为一个百分比，后面跟着一个负长度。另一方面，表达式 **calc(60% - 4px)** 将被解析为减法运算符和一个长度。
• 尽管乘法 (*) 和除法 (/) 运算符不需要空格，但为了保持一致性，建议添加它们。
• calc() 函数可以嵌套使用。

示例 1 - 简单示例

在此示例中，我们使用 calc() 函数来定义 div 元素的 width 和 height。在 calc() 函数的表达式中有相同单位的减法。

表达式的结果将被视为属性的值，因此，width 的值将是 75%，height 的值将是 275px。

在上面的示例中，我们可以直接指定 height 和 width 的值。虽然上面的示例中的表达式具有相同的单位，但当单位不同时会发生什么？那么直接写值就会很困难。

现在，我们将看到另一个演示，其中我们使用混合单位。

示例 2 - 混合单位的使用

让我们看另一个例子，我们将使用嵌套的 calc() 函数。

示例 3 - 嵌套 calc() 函数