想建立優質的 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()。Chrome 19 (開發人員版) 目前提供長度的 calc() 屬性，方法是在 Firefox 中使用 -webkit-calc 屬性，自第 8 版起 (自第 9 版起採用 -moz-calc 資源)，在 Internet Explorer 中則是從第 9 版移除前置字元。請在下方留言，分享你的想法。