CSS3 GEMS：calc（）函數

CSS3 calc() 函數詳解：靈活佈局的利器

核心要點

• CSS3 calc() 函數允許計算長度、數字、角度、過渡/動畫時間或聲音頻率，並支持混合使用不同單位類型。此功能在佈局設計中尤其有用，因為它允許在流體或響應式佈局中進行精確的寬度計算。
• calc() 函數的瀏覽器支持度目前有限。 Internet Explorer 9 和 Firefox（帶前綴）原生支持，但 webkit（Chrome 和 Safari）和 Opera 尚未實現。但是，可以在樣式表中使用漸進增強來確保跨不同瀏覽器的兼容性。
• CSS3 的 min() 和 max() 函數返回兩個或多個逗號分隔值的最小值或最大值，也用於控制相對字體大小，但目前任何最新的瀏覽器都不支持。

CSS3 模塊化規範中隱藏著許多寶藏。本文將介紹 calc()；一個非常有用的屬性，它可能會改變您處理佈局設計的方式。 CSS3 calc() 函數主要用於計算長度、數字、角度、過渡/動畫時間或聲音頻率。但是，它允許您混合使用測量類型——這是 CSS 中一個強大的概念。考慮一個包含兩個浮動元素的網站佈局。您希望這兩個元素具有相等的寬度，並以 60px 的水平邊距分隔。聽起來很簡單？在固定寬度設計中不是問題；如果頁面寬度為 960px，則兩個元素都將為 450px。但是流體或響應式佈局呢？無法確定頁面寬度，因此大多數開發人員會將每個元素設置為 45%。只有當頁面恰好為 600px 時，10% 的邊距才為 60px；更寬或更窄的瀏覽器窗口會相應地放大或縮小邊距。幸運的是，新的 calc() 函數允許我們計算寬度。在這種情況下，我們希望兩個元素都為 50% 減去 30px，例如：

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

也許您想要一個相對於字體大小的邊距——例如 4em？沒問題：

#element1, #element2 {
  width: calc(50% - 2em);
}

或者您可能想要在兩個元素周圍添加 2px 的邊框：

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

我建議您保持計算簡單，但可以使用複雜的公式，例如：

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

瀏覽器支持

calc() 函數是 W3C 建議，那麼哪個瀏覽器提供原生支持呢？錯了。在撰寫本文時，只有 Internet Explorer 9。 Firefox 也支持它，並帶有前綴；-moz-calc()。它尚未在 webkit（Chrome 和 Safari）或 Opera 中實現，但是，它非常有用，我懷疑我們不需要等待太久。幸運的是，您可以在樣式表中使用漸進增強：

#element1, #element2 {
  width: 45%; /* 所有浏览器 */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ 和未来的浏览器 */
}

請記住，您還需要相應地調整邊距，例如：

#element2 {
  margin-left: 10%; /* 所有浏览器 */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ 和未来的浏览器 */
}

CSS3 min() 和 max()

如果您喜歡 calc()，您會喜歡 min() 和 max() 函數。它們接受兩個或多個逗號分隔的值，並相應地返回最小值或最大值，例如：

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

這些函數在使用相對字體大小時將特別有用，以確保文本不會變得太大或太小。不幸的是，min() 和 max() 目前在任何最新的瀏覽器中都不受支持。讓我們希望它們很快就會出現。

(此處省略了Frequently Asked Questions部分，因為該部分內容與原文高度重複，偽原創難度較大，且篇幅較長，不利於保持文章精簡。)

以上是CSS3 GEMS：calc（）函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！