建立漂亮的 CSS 版面配置時，請先為放置在網路應用程式中的所有項目指派大小。使用者一直希望能使用混合尺寸單位指定尺寸，舉例來說，您可以保留 50% 的區域，再加上固定的空間量，例如 10 個像素。您現在可以使用 calc() 屬性執行這項操作。您可以在任何需要長度或數字的地方使用這項功能，因此可以用於定位物件，或在 rgb() 顏色值中使用，因此在樣式表單中有很多實用功能。
您可以使用 calc() 做什麼？
calc() 屬性可用於樣式表中任何含有 CSS 長度或數字的地方。
這項功能提供兩項主要功能，可讓版面配置更具彈性：
- 混合使用百分比和絕對值。
- 混合使用不同大小的單位。
混合百分比和絕對單位
以下將以混合百分比與絕對單位的範例說明。假設我們想分配可用區域的 50%，並扣除固定數量的像素，那麼我們可以這樣寫：
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
如果背景顏色為綠色，則會像這樣：
如果縮小父項大小，則會變成這樣：
這裡的好處是，我們一向都知道內容的右側邊緣會位於容器區域中間左側的 100 像素處。透過這種方式結合不同值類型，可讓您的網頁應用程式在不同大小的裝置上處理版面配置，且控制權比以往更強大。
混合單位
另一個很棒的功能是，您可以結合不同測量單位的單位，以取得最終大小。舉例來說，您可以混合使用「em」和「px」單位，設定相對於目前字型大小的大小。
#bar {
height: calc(10em + 3px);
}
立即試用
使用 calc() 時，您可以使用 +、-、* 和 / 來加減乘除值，讓您有更多可能性。您可以在任何可使用 CSS 長度或數字的地方使用 calc()。我們也正在努力為角度和頻率屬性新增 calc()，敬請期待。長度屬性 calc() 現已可在 Chrome 19 (開發人員頻道版本) 中使用 -webkit-calc 屬性，在 Firefox 8 以上版本中使用 -moz-calc 屬性，以及在 Internet Explorer 9 以上版本中使用未加上前置字元的屬性。歡迎在下方留言，與我們分享你的想法。