calc()函數算是css中的一個另類了，一般來說css都是直接確定的樣式，而calc()函數卻是可以動態計算，這和css靜態的概念有些區別,但這並不妨礙其優秀的性能。
什么是calc()?
calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性 設置動態值。動態值我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度，其實覺得流體布局和bootstrap的柵欄系統有點類似，這次主要也是因為要使用bootstrap來構建一個響應式的頁面才會用到calc()函數。
calc()能做什么？
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算，我覺得一般實踐中的使用是用百分比和px進行加減，其他的因為本來用途還並不是很廣泛，所以個人覺得在使用中的用處應該也比較少。
calc()語法
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
.elm {
width: calc(expression);
}
其中"expression"是一個表達式，用來計算長度的表達式。
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智能的功能：
- 使用“+”、“-”、“*” 和 “/”四則運算；
- 可以使用百分比、px、em、rem等單位；
- 可以混合使用各種單位進行計算；
- 表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
- 表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各 瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
大家在實際使用時，同樣需要添加瀏覽器的前綴
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
通過上面的了解，大家對calc()不在那么陌生，但對於實際的運用可能還是不太了解，那么大家就接下來跟我一起動手，通過實例來了解他吧。首先我們來看一個最常用的實例：
<div class="demo"> <div class="box"></div> </div>
上面的結構很簡單，就是一個div.demo的元素中包含了一個div.box的元素，接下來我們一步一步來看其中的變化。
第一步：添加普通樣式：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
}
此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：
第二步，在div.box上添加border和padding
這一步很棘手的事情來了，在div.box上添加10px的內距padding，同時添加5px的border：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
為了更好的說明問題，我在div.demo上添加了一個padding：3px 0;
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
這個時候大家不知道能否想到問題會發生在哪？其實很簡單，這個時候div.box的寬度大於了其容器div.demo的總寬度，從而撐破容器伸出來了，如圖所示：
第三步，calc()的運用
為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦於不知道元 素的總寬度，比如說是自適應的布局，只知道一個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨着CSS3的出現，其中利用box- sizing來改變元素的盒模型類型實使實現效果，但今天我們學習的calc()方法更是方便。
知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最終得到的值就是div.box的width值：
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/*寫給不支持calc()的瀏覽器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
這樣一來，通過calc()計算后，div.box不在會超出其容器div.demo的寬度，如圖所示：
借用網上的一個簡單的例子來說明calc()函數的用法與用處，來源http://www.missyuan.net/school/web_2012/web_8338.html
主要是因為在實際的使用中確實有用到的地方並且確實功能比較強大，所以想寫下來做一個總結，方便之后查詢，如有侵權請立即告知，必定會立即處理。
其實寫這個的主要原因是因為在使用的過程中還要注意不同單位的值想加減的時候中間的空格問題，函數要求把不同單位數值運算時用空格間隔開，有必要時還可以使用括號，這個個人覺得也是相當重要的。