什么是calc()?
學習calc()之前，我們有必要先知道calc()是什么？只有知道了他是個什么東東？在實際運用中更好的使用他。
calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc()能做什么？
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
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();}
.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函數里面運算符兩側必須各保留一個空格，否則函數會報錯
)
