函式 calc()

開放

6.1 calc() 函數的基本功能

calc() 函數提供在 CSS 中執行數學運算的能力,讓樣式可以更靈活和自適應。這個函式對於結合不同單位的計量和動態計算值(如尺寸、間距、邊框和其他屬性)非常有用。

calc() 函數允許執行四種基本數學運算:加、減、乘和除。這些操作可以用於結合不同單位(像素、百分比、emrem 等),這讓創建自適應和動態樣式變得更簡單。

語法:

選擇器 {
  屬性: calc(表達式);
}

操作示例

  • 加法: calc(100% + 20px)
  • 減法: calc(50% - 10px)
  • 乘法: calc(10px * 2)
  • 除法: calc(100px / 2)

範例:

HTML
<div>
  Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
  Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
CSS
div {
  width: calc(100% - 50px);
  margin: calc(1em + 10px);
  background: lightblue;
}

在這個範例中:

  • 元素的寬度計算為 100% 減去 50px
  • 間距計算為1em 加上 10px

6.2 calc() 函數的使用例子

1. 加法和減法

calc() 函數經常用於加法和減法,讓你可以更精確地控制元素的尺寸和間距。

範例 1: 百分比與像素的加法

這個例子中,容器的寬度計算為父元素寬度的 100% 減去 40 像素。這讓你可以考慮到容器內部的間距和其他元素:

HTML
<div class="container">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
  Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
CSS
.container {
  width: calc(100% - 40px);
  margin: 20px;
  background: lightgreen;
}

範例 2: 減去固定值

在這個例子中,側邊欄的寬度計算為父元素寬度的 100% 減去 250 像素,這樣可以給主要內容留出空間:

HTML
<div class="sidebar">
  <ul>
    <li><a href="#"></a>Article 1</li>
    <li><a href="#"></a>Article 2</li>
    <li><a href="#"></a>Article 3</li>
  </ul>
</div>
CSS
.sidebar {
  width: calc(100% - 250px);
  background: tomato;
}

2. 乘法和除法

calc() 函數也允許進行乘法和除法,這對於創建比例尺寸和間距很有幫助。

範例 3: 乘法

在這個例子中,元素的高度計算為 20 像素乘以 3,得到 60 像素:

HTML
<div class="element">Element</div>
CSS
.element {
  height: calc(20px * 3);
  background: lightpink;
}

範例 4: 除法

在這個例子中,塊的寬度計算為父元素寬度的三分之一,這樣可以創建三個相等的列:

HTML
<div class="box">
  Box
</div>
CSS
.box {
  width: calc(100% / 3);
  background: yellow;
}

6.3 結合不同單位

calc() 函數的一個關鍵功能是結合不同的單位,這讓樣式更具自適應性和靈活性。

範例 5: 結合百分比和像素

在這個例子裡,標題的高度計算為視口高度的 100% 減去 50 像素,這讓你可以考慮到固定的間距。

HTML
<header class="header">
  <nav>
    <ul>
      <li>主頁</li>
      <li>關於我們</li>
      <li>聯絡我們</li>
    </ul>
  </nav>
</header>
CSS
.header {
  height: calc(100vh - 100px);

  background: lightgreen;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

動態計算尺寸

calc() 函數對於創建動態計算的元素尺寸很有用,這讓設計更具自適應性和靈活性。

範例 6: 動態計算寬度

在這個例子中,內容的寬度計算為父元素寬度的 100% 減去每側雙倍的間距(20 像素):

HTML
<div class="content">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
  Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
CSS
.content {
  width: calc(100% - 2 * 20px);
  background: lightgreen;
}

6.4 在媒體查詢中使用 calc()

calc() 函數可以用在媒體查詢中以創建自適應的樣式。

範例 7: 在媒體查詢中增加自適應的間距

在這個例子中,當視口寬度達到 600 像素時,容器的間距會隨著視口的寬度增加:

HTML
<div class="container">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
  Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
CSS
.container {
  padding: 10px;
  background: tomato;
}

@media (min-width: 600px) {
  .container {
    padding: calc(10px + 2vw);
  }
}

範例 8: 在媒體查詢中的自適應尺寸

在這個例子中,當螢幕寬度小於 600 像素時,容器的間距會減少一半,這提高了設計的自適應性:

HTML
<div class="container">
  Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
  Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
CSS
:root {
  --main-padding: 20px;
}

.container {
  padding: var(--main-padding);
  background: yellow;
}

@media (max-width: 600px) {
  .container {
    padding: calc(var(--main-padding) / 2);
  }
}

6.5 優點與缺點

使用 calc() 函數的優點:

1. 靈活性。 calc() 函數讓你可以創建更靈活和自適應的設計,透過結合不同單位和執行數學運算。

2. 動態樣式控制。 使用 calc() 可以動態改變元素的尺寸和間距,讓設計更具響應性和自適應性。

3. 簡化複雜計算。 calc() 函數簡化了在 CSS 中執行複雜的計算,讓你不必為簡單的算術操作使用 JavaScript。

calc() 函數的限制與特性:

1. 運算符周圍的空格。calc() 表達式中,運算符周圍必須有空格。例如,calc(100% - 50px) 是正確的,calc(100%-50px) 會產生錯誤。

2. 瀏覽器相容性。 calc() 函數被大多數現代瀏覽器支持,但對於舊版瀏覽器可能需要檢查相容性。

3. 性能。 使用 calc() 可能會稍微增加頁面的渲染時間,特別是在執行複雜計算或頻繁更改值時。

1
任務
Frontend SELF TW,  等級 32課堂 0
上鎖
使用 calc() 計算高度
使用 calc() 計算高度
1
任務
Frontend SELF TW,  等級 32課堂 0
上鎖
使用 calc() 設置間距
使用 calc() 設置間距
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言