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>

列印頁面