calc() 是 CSS 中一個非常實用的函數(shù)，允許開發(fā)者在聲明 CSS 屬性值時進行動態(tài)計算。它的核心優(yōu)勢在于能夠混合使用不同的單位（如百分比、像素、視口單位等），并直接在樣式表中完成數(shù)學(xué)運算，從而實現(xiàn)更靈活的布局設(shè)計。

一、基本語法

property: calc(expression);

?expression?：數(shù)學(xué)表達式，支持 +、-、*、/ 四種運算符。

?運算符兩側(cè)必須保留空格?，例如 calc(100% - 20px)（正確），而非 calc(100%-20px)（錯誤）。

二、核心特性?

?1、單位混合計算?

支持不同單位的混合運算，比如百分比與像素、rem 與 vw 等，突破傳統(tǒng) CSS 單位限制。

.box {
  width: calc(100% - 50px); /* 容器寬度為父元素寬度減去50像素 */
}

?2、響應(yīng)式布局利器?

結(jié)合視口單位（如 vw、vh），輕松實現(xiàn)自適應(yīng)布局：

.header {
  height: calc(100vh - 80px); /* 高度為視口高度減去80px */
}

3、動態(tài)計算替代固定值?

減少手動計算，直接在 CSS 中定義邏輯關(guān)系：

.item {
  margin: calc(1rem * 0.5); /* 相當(dāng)于 0.5rem */
}

三、使用場景示例?

1. ?等分布局（消除縫隙）

.grid-item {
  width: calc((100% - 20px) / 3); /* 三列布局，總寬度減去間隙后等分 */
}

2. ?視口適應(yīng)布局

.sidebar {
  width: 250px;
}
.content {
  width: calc(100vw - 250px); /* 內(nèi)容區(qū)域?qū)挾葹橐暱趯挾葴p去側(cè)邊欄 */
}

3. ?動態(tài)調(diào)整間距

.text-block {
  padding: calc(1rem + 2vh); /* 內(nèi)邊距隨視口高度動態(tài)變化 */
}

?注意事項?

1、運算符空格強制要求?

    錯誤寫法會失效：calc(100%-20px) ?

    正確寫法：calc(100% - 20px) ?

?2、乘法和除法限制?

    乘法：至少一個操作數(shù)為無單位數(shù)字（如 2 * 20px ?，20px * 2rem ?）。

    除法：右操作數(shù)必須是無單位數(shù)字（如 100px / 2 ?，100px / 2rem ?）。

?3、嵌套使用?

    支持多層嵌套，但需注意可讀性：

width: calc(100% - calc(20px + 2rem));

?4、兼容性?

    現(xiàn)代瀏覽器普遍支持（包括 IE9+）。

    舊版瀏覽器（如 IE8）需提供降級方案：

.box {
  width: 95%; /* 備用值 */
  width: calc(100% - 50px);
}

四、進階技巧?

?CSS 變量結(jié)合使用?

動態(tài)調(diào)整更靈活：

:root {
  --spacing: 20px;
}
.container {
  padding: calc(var(--spacing) * 2);
}

?配合 min()/max() 函數(shù)?

實現(xiàn)邊界控制：

.responsive-image {
  width: calc(50vw - 20px);
  max-width: 300px; /* 限制最大寬度 */
}

calc() 通過將計算邏輯直接寫入 CSS，大幅提升代碼的靈活性和可維護性。尤其在響應(yīng)式設(shè)計、動態(tài)布局和復(fù)雜單位轉(zhuǎn)換場景中，它能顯著減少 JavaScript 干預(yù)，是現(xiàn)代前端開發(fā)的常用工具之一。使用時需注意語法細節(jié)和兼容性，合理搭配其他 CSS 特性效果更佳。