在網(wǎng)頁(yè)制作過程中，calc() 是 CSS 的一個(gè)原生函數(shù)，允許你在指定屬性值時(shí)執(zhí)行簡(jiǎn)單的算術(shù)運(yùn)算（加法、減法、乘法、除法）。它特別適合用于 width、height、margin、padding、font-size 等接受長(zhǎng)度值的屬性。通過 calc()，你可以混合使用不同的單位（如百分比、像素、em、rem、視口單位等），從而實(shí)現(xiàn)更靈活、響應(yīng)式的布局。

基本語法

width: calc(表達(dá)式);

表達(dá)式可以包含 +（加）、-（減）、*（乘）、/（除）運(yùn)算符。

重要：運(yùn)算符前后必須保留空格（例如 calc(100% - 20px) 正確，calc(100%-20px) 無效）。

允許混合單位，如 calc(100vh - 5rem)、calc(50% + 10px) 等。

calc實(shí)際應(yīng)用舉例

固定邊欄 + 流體主內(nèi)容（兩列布局）

假設(shè)左側(cè)邊欄寬度固定為 200px，右側(cè)主內(nèi)容區(qū)域自動(dòng)填滿剩余寬度。

<div class="container">
  <aside class="sidebar">固定邊欄 200px</aside>
  <main class="content">主內(nèi)容區(qū)域?qū)挾?nbsp;= 100% - 200px</main>
</div>

.container {
  width: 100%;
  overflow: hidden; /* 清除浮動(dòng) */
}
.sidebar {
  float: left;
  width: 200px;
  background: #f0f0f0;
}
.content {
  float: left;
  width: calc(100% - 200px); /* 關(guān)鍵：總寬度減去邊欄寬度 */
  background: #d9edf7;
}

效果：無論容器如何縮放，主內(nèi)容區(qū)域始終比父容器寬度少 200px，完美實(shí)現(xiàn)自適應(yīng)。

為元素添加內(nèi)邊距，而不破壞“百分比寬度”

有時(shí)我們希望一個(gè)塊級(jí)元素的寬度為父容器的 100%，但同時(shí)需要固定的左右內(nèi)邊距。直接設(shè)置 width: 100% 再加上 padding 會(huì)導(dǎo)致元素溢出父容器（標(biāo)準(zhǔn)盒模型下）。使用 calc() 可以解決：

.box {
  width: calc(100% - 40px);  /* 父容器寬度減去左右各 20px 的內(nèi)邊距 */
  padding: 0 20px;
  background: #ffcc00;
  box-sizing: border-box;  /* 配合 box-sizing 更穩(wěn)健，但 calc 仍然有用 */
}

如果不使用 calc()，你可能需要在外層再套一個(gè)容器，或者使用 box-sizing: border-box 讓 padding 向內(nèi)擠，但 calc() 提供了另一種直觀的控制方式。

響應(yīng)式網(wǎng)格系統(tǒng)中的復(fù)雜間距

假設(shè)需要?jiǎng)?chuàng)建一個(gè)三列網(wǎng)格，每列之間有 2% 的間距，且最左側(cè)和最右側(cè)與容器邊緣無間距。可以用 calc() 精確控制每列寬度：

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-item {
  width: calc((100% - 2 * 2%) / 3);  /* 總寬度減去兩個(gè)間距，再除以 3 */
  margin-bottom: 20px;
  background: #b0e0e6;
}

這里 calc() 讓間距和列寬都使用百分比，布局能隨容器平滑縮放，避免了固定像素值帶來的不協(xié)調(diào)。

與視口單位結(jié)合，實(shí)現(xiàn)高度自適應(yīng)

設(shè)置一個(gè)元素高度為視口高度減去固定高度的頁(yè)眉和頁(yè)腳：

.main-content {
  height: calc(100vh - 80px - 60px); /* 視口高度減去 80px 頁(yè)眉和 60px 頁(yè)腳 */
  overflow-y: auto;
}

calc() 函數(shù)的瀏覽器兼容性

calc() 擁有非常良好的瀏覽器支持，可以安全地用于生產(chǎn)環(huán)境。

Chrome：19+（2012年發(fā)布）完全支持，無前綴。

Firefox：4+（2011年發(fā)布）使用 -moz-calc()，16+ 開始支持無前綴。

Safari：6+（2012年發(fā)布）完全支持，無前綴。

Edge：全部版本支持（包括基于 EdgeHTML 的早期版本和基于 Chromium 的新版）。

Internet Explorer：IE9 部分支持（不支持用在 background-position 上，但支持 width 等屬性）；IE10+ 完全支持。

Opera：15+ 完全支持（基于 Chromium）。

移動(dòng)端：

iOS Safari：6+ 完全支持。

Android Browser：4.4+ 完全支持；部分舊版本（4.0–4.3）需要 -webkit-calc()，但份額已極低。

Chrome for Android、Firefox for Android 等均完全支持。