CSS 数据类型 - <calc-sum>

CSS <calc-sum> 数据类型定义了一个表达式，允许您使用任何数学函数执行计算。该表达式执行两个值的加法和减法。

可能的值

<calc-sum> 类型在两个数值之间使用以下算术运算符之一。

+ 对两个数字执行加法运算。
- 从第一个数字中减去第二个数字。

语法

calc() = + | -;

需要记住的要点

表达式中的操作数可以是任何 <length> 语法值。您可以指定 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>。
您可以在一个表达式中组合不同的单位，例如从 % 中减去 px。例如，calc(50% - 30px) 是有效的。
在计算中包含 CSS 变量，例如 calc(20px + var(--variable))。
在 + 和 - 运算符周围添加空格。有效表达式 - calc(40% - 30px)，无效表达式 - calc(40%-30px)。

CSS cal() - 加法 (+)

以下示例演示了 calc() 函数如何通过将元素高度的 20% 和 50px 相加来计算元素的总高度 -

<html>
<head>
<style>
   div {
      position: absolute;
      height: calc(20% + 50px);
      border: 2px solid blue;
      background-color: pink;
      padding: 5px;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div>Addition opeartion calc(20% + 50px) on height.</div>
</body>
</html>

CSS cal() - 减法 (-)

以下示例演示了 calc() 函数如何用于计算总宽度，该宽度又通过从 200px 中减去元素宽度的 50% 来计算 -

<html>
<head>
<style>
   div {
      position: absolute;
      width: calc(50% - 200px);
      border: 2px solid blue;
      background-color: pink;
      padding: 5px;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div>Perform subtraction using calc(50% - 200px) function on width.</div>
</body>
</html>

打印页面