6.1 calc() 函數的基本功能
calc() 函數提供在 CSS 中執行數學運算的能力，讓樣式可以更靈活和自適應。這個函式對於結合不同單位的計量和動態計算值（如尺寸、間距、邊框和其他屬性）非常有用。
calc() 函數允許執行四種基本數學運算：加、減、乘和除。這些操作可以用於結合不同單位（像素、百分比、em、rem 等），這讓創建自適應和動態樣式變得更簡單。
語法：
選擇器 {
屬性: calc(表達式);
}
操作示例
- 加法:
calc(100% + 20px) - 減法:
calc(50% - 10px) - 乘法:
calc(10px * 2) - 除法:
calc(100px / 2)
範例：
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
在這個範例中：
- 元素的寬度計算為
100%減去50px - 間距計算為
1em加上10px
6.2 calc() 函數的使用例子
1. 加法和減法
calc() 函數經常用於加法和減法，讓你可以更精確地控制元素的尺寸和間距。
範例 1: 百分比與像素的加法
這個例子中，容器的寬度計算為父元素寬度的 100% 減去 40 像素。這讓你可以考慮到容器內部的間距和其他元素：
<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>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
範例 2: 減去固定值
在這個例子中，側邊欄的寬度計算為父元素寬度的 100% 減去 250 像素，這樣可以給主要內容留出空間：
<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>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. 乘法和除法
calc() 函數也允許進行乘法和除法，這對於創建比例尺寸和間距很有幫助。
範例 3: 乘法
在這個例子中，元素的高度計算為 20 像素乘以 3，得到 60 像素：
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
範例 4: 除法
在這個例子中，塊的寬度計算為父元素寬度的三分之一，這樣可以創建三個相等的列：
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 結合不同單位
calc() 函數的一個關鍵功能是結合不同的單位，這讓樣式更具自適應性和靈活性。
範例 5: 結合百分比和像素
在這個例子裡，標題的高度計算為視口高度的 100% 減去 50 像素，這讓你可以考慮到固定的間距。
<header class="header">
<nav>
<ul>
<li>主頁</li>
<li>關於我們</li>
<li>聯絡我們</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
動態計算尺寸
calc() 函數對於創建動態計算的元素尺寸很有用，這讓設計更具自適應性和靈活性。
範例 6: 動態計算寬度
在這個例子中，內容的寬度計算為父元素寬度的 100% 減去每側雙倍的間距（20 像素）：
<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>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 在媒體查詢中使用 calc()
calc() 函數可以用在媒體查詢中以創建自適應的樣式。
範例 7: 在媒體查詢中增加自適應的間距
在這個例子中，當視口寬度達到 600 像素時，容器的間距會隨著視口的寬度增加：
<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>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
範例 8: 在媒體查詢中的自適應尺寸
在這個例子中，當螢幕寬度小於 600 像素時，容器的間距會減少一半，這提高了設計的自適應性：
<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>
: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() 可能會稍微增加頁面的渲染時間，特別是在執行複雜計算或頻繁更改值時。
GO TO FULL VERSION