什麼是calc()?css
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()語法很是簡單，就像咱們小時候學加 （+）、減（-）、乘（*）、除（/）同樣，使用數學表達式來表示： css3
-
.elm {width: calc(expression);}
其中"expression"是一個表達式，用來計算長度的表達式。express
calc()的運算規則
calc()使用通用的數學運算規則，可是也提供更智能的功能：瀏覽器
使用「+」、「-」、「*」 和 「/」四則運算；
可使用百分比、px、em、rem等單位；
能夠混合使用各類單位進行計算；
表達式中有「+」和「-」時，其先後必需要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都獲得較好支持，一樣須要在其前面加上各瀏覽器廠商的識別符，不過惋惜的是，移動端的瀏覽器對早期版本的兼容性不是太好。
函數