css calc()用法

calc()從字面我們可以把他了解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動态值。為何說是動态值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem機關值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由浏覽器去計算。

calc()文法

calc()文法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：

width: calc(expression);      

其中”expression”是一個表達式，用來計算長度的表達式。

calc()使用通用的數學運算規則，但是也提供更智能的功能：

1. 使用“+”、“-”、“*” 和 “/”四則運算；
2. 可以使用百分比、px、em、rem等機關；
3. 可以混合使用各種機關進行計算；
4. 表達式中有“+”和“-”時，其前後必須要有空格，如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的；
5. 表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。

     本文靈感來源   http://www.daqianduan.com/6183.html