CSS calc() 函數

calc() 函數可以在 CSS 中進行數學計算，允許混合不同單位進行運算。

基本語法

property: calc(運算式);

.box {
  width: calc(100% - 40px);
  height: calc(100vh - 60px);
  padding: calc(10px + 2%);
}

支援的運算

• + 加法
• - 減法
• * 乘法
• / 除法

.example {
  width: calc(100% - 20px);      /* 減法 */
  width: calc(50% + 100px);      /* 加法 */
  width: calc(100% / 3);         /* 除法 */
  width: calc(20px * 2);         /* 乘法 */
}

混合單位

calc() 最強大的功能是可以混合不同單位：

.sidebar {
  width: calc(250px + 10%);
}

.header {
  height: calc(100vh - 60px);
}

.content {
  width: calc(100% - 250px - 40px);
}

巢狀 calc()

可以巢狀使用（雖然通常不需要）：

.box {
  width: calc(calc(100% - 20px) / 2);
}

/* 等同於 */
.box {
  width: calc((100% - 20px) / 2);
}

搭配 CSS 變數

:root {
  --sidebar-width: 250px;
  --gap: 20px;
}

.main {
  width: calc(100% - var(--sidebar-width) - var(--gap));
}

.spacing {
  padding: calc(var(--gap) * 2);
}

實用範例

固定側邊欄 + 彈性主內容

.sidebar {
  width: 250px;
}

.main {
  width: calc(100% - 250px);
}

扣除固定高度

.header {
  height: 60px;
}

.content {
  height: calc(100vh - 60px);
}

等分欄位（含間距）

.column {
  width: calc((100% - 40px) / 3);  /* 三欄，兩個 20px 間距 */
  margin-right: 20px;
}

.column:last-child {
  margin-right: 0;
}

置中（已知寬度）

.centered {
  width: 800px;
  margin-left: calc((100% - 800px) / 2);
}

響應式字體

.title {
  font-size: calc(16px + 2vw);
}

等比例縮放

.box {
  width: calc(100% / 4);
  padding-top: calc(100% / 4);  /* 正方形 */
}

扣除邊框和內距

.input {
  width: calc(100% - 20px - 2px);  /* 扣除 padding 和 border */
  padding: 10px;
  border: 1px solid #ccc;
}

/* 更好的做法是用 box-sizing */
.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

動態間距

:root {
  --gutter: 20px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) / -2);
}

.grid-item {
  width: calc(33.33% - var(--gutter));
  margin: calc(var(--gutter) / 2);
}

注意事項

空格規則

/* 正確 */
width: calc(100% - 20px);

/* 錯誤：減號前後需要空格 */
width: calc(100%-20px);
width: calc(100% -20px);
width: calc(100%- 20px);

除法和乘法

除數和乘數必須是純數字（無單位）：

/* 正確 */
width: calc(100% / 3);
width: calc(20px * 2);

/* 錯誤 */
width: calc(100px / 20px);  /* 無效 */
width: calc(20px * 2px);    /* 無效 */

零值需要單位

在 calc() 中，即使是零也需要單位：

/* 建議 */
width: calc(100% - 0px);

/* 可能有問題 */
width: calc(100% - 0);

min()、max() 和 clamp()

這些函數提供更多計算功能：

/* min()：取最小值 */
width: min(100%, 800px);  /* 等同於 max-width: 800px */

/* max()：取最大值 */
width: max(50%, 300px);   /* 等同於 min-width: 300px */

/* clamp()：限制範圍 */
width: clamp(300px, 50%, 800px);  /* 最小 300px，最大 800px */

font-size: clamp(1rem, 2vw + 1rem, 3rem);