今天瀏覽這個http://www.sitepoint.com站時，因爲好奇看了下人家寫的代碼，結果發現了這行代碼，
於是就研究了一下，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()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
width: calc(expression);
其中”expression”是一個表達式，用來計算長度的表達式。
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智能的功能：
使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表達式中有“+”和“-”時，其前後必須要有空格，如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的；
表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
瀏覽器的兼容性
我們來個例子，我們做一個三列並排的模塊，寬度按百分比、有padding值、有border值、還有margin-right，而且這三個值是px，
li{float:left;width:33.3333%;height:50px;padding:10px;margin-right:10px;background:#FF6666;border:5px solid #DAC8A7;}效果圖：
它是不會好好並列的，在這種情況下就不好算了，就算算出來也有那麼一點誤差，不是嗎？現在我們就用到了calc(),
li{float:left;//width:33.3333%;height:50px;padding:10px;margin-right:15px;background:#FF6666;border:5px solid #DAC8A7;width:calc(33.3333% - (10px + 5px) * 2 - 15px )}意思是(width-(padding+border)*2-margin)
現在可以並排了
好了，到這就告一段絡了，再稍微優化一下左右邊15px的空距，讓兩邊都挨邊。就在父級上加個margin-right：-15px，OK 搞定，
現在拿這個去做響應模式應該很方便了
來源：愛創課堂