CSS 函式 - calc()

CSS 函式calc()允許在定義 CSS 屬性時計算值。它適用於 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>的值。

函式calc()接受一個表示式作為引數，並將該表示式的結果用作值。

表示式可以包含不同的運算子，並遵循運算子優先順序的標準規則。

+ 加法。
- 減法
* 乘法。至少一個引數必須是 <number>。
/ 除法。右側必須是 <number>。

注意事項

calc() 中的+ 和- 運算子必須用空格分隔，以避免混淆。
calc() 中的* 和/ 運算子不需要空格，儘管為了保持一致性建議包含空格。
在自動和固定佈局表格中，表格列、列組、行、行組和單元格的寬度和高度使用百分比的數學表示式可能會被視為已指定auto。
允許巢狀calc() 函式，將內部函式視為簡單的括號。
calc() 函式不能直接用百分比值替換數值。
對於長度，不能使用0來表示 0px 或任何其他長度單位。必須指定帶單位的版本。

語法

calc( <calc-sum> )

與整數一起使用

當calc() 用於需要<integer> 的上下文中時，該值將四捨五入到最接近的整數。例如

.modal {
   z-index: calc(6 / 4);
}

這將使.modal 的最終 z-index 值為 2。

CSS calc() - 定位物件

以下示例演示了calc() 的用法。calc() 用於計算框的高度和寬度，從而產生一個響應式佈局，並在框周圍始終保持 50px 的邊距。

<html>
<head>
<style>
   .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }   
   .box {
      width: calc(100% - 99px);
      height: calc(100% - 99px);
      margin: 50px;
      background-color: gray;
      text-align: center;
    }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h2>This is an example of calc()</h2>
      </div>
   </div>
</body>
</html>

CSS calc() - 表單欄位的自動大小調整。

Calc() 還可以用於確保表單欄位適合可用空間，而不會超出其容器的邊緣，同時保持合理的邊距。

以下示例顯示了使用calc() 調整表單欄位的大小

<html>
<head>
<style>
   form {
      display: flex;
      flex-direction: column;
      align-items: center;
         background-color: lightblue;
   }
   input[type="text"], textarea {
      width: calc(100% - 50px);
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      resize: none;
   }
   input[type="submit"] {
      padding: 10px 20px;
      margin: 10px;
      border-radius: 5px;
      border: none;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name">
      <label for="email">Email:</label>
      <input type="text" id="email" name="email" placeholder="Enter your email">
      <label for="message">Message:</label>
      <textarea id="message" name="message" placeholder="Enter your message"></textarea>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

CSS calc() - 使用 CSS 變數巢狀 calc()

calc() 也可以與 CSS 變數結合使用。以下示例顯示了帶有 CSS 變數的calc()

<html>
<head>
<style>
   :root {
      --width: 200px;
      --padding: 20px;
   }
   .container {
      width: calc(var(--width) + var(--padding));
      background-color: lightgray;
      padding: var(--padding);
   }
   .box {
      width: calc(var(--width) / 2);
      height: calc(var(--width) / 2);
      background-color: black;
      margin: 0 auto;
   }
</style>
</head>
<body>
   <div class="container">
   <div class="box"></div>
</div>
</body>
</html>

列印頁面