CSS3中有很多的隱藏的模塊與功能。在這里我們將探索cal()功能；這個功能可能會改變你以前設計布局的方式，灰常的強悍~~

CSS3的cal()功能是用來計算長度（lengths），數字（numbers），角度（angles），過渡（transition）/動畫時間（animation times）或者聲音頻率（sound frequencies）。它將允許你使用混合計算類型—在CSS3中也是一個異常強大的概念。

假設一個網站的設計要包含2個浮動的元素，你想要用一個60px的水平線將其分成2個相同寬度的元素，聽起來似乎容易？如果頁面設計的是960px，那么很容易，每個都是450px。

但是如果改元素是一個浮動框或者動態的布局怎么辦？如果頁面設計的是600px，那么大部分的設計者將會將水平線設置為10%，剩下的各45%，在寬屏或者方屏的瀏覽窗口中將會變形或者有邊距！

幸運的是，新功能cal()功能允許women計算寬度。在上面的例子中，我們就可以將其設置為總寬度的50%-30px，例如：

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

如果你想讓水平線的大小是相對于字體大小兒定，如4em，沒問題：

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

或者你想要在元素周圍放一個2px的border，也沒有問題：

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

筆者建議盡量是計算簡潔些，但是復雜的計算是能夠實現的，例如：

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

該元素的瀏覽器支持情況：