CSS 数据类型

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

可能的值

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

  • + 对两个数字执行加法运算。

  • - 从第一个数字中减去第二个数字。

语法

calc() = + | -;

需要记住的要点

  • 表达式中的操作数可以是任何 <length> 语法值。您可以指定 <length>、<Frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>。

  • 您可以在一个表达式中组合不同的单位，例如从 % 中减去 px。例如，calc(50% - 30px) 有效。

  • 在计算中包含 CSS 变量，例如 calc(20px + var(--variable))。

  • 在计算中包含 CSS 变量，例如 calc(20px + var(--variable))。 p>

  • 在 + 和 - 运算符周围添加空格。有效表达式 - 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>高度上的加法运算calc(20% + 50px).</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>使用 calc(50% - 200px) 函数对宽度执行减法.</div>
</body>
</html>