不知道各位有沒有遇到過，想在一盒模型內，一個元素占據固定寬度，另一個元素將剩余的寬度占滿。
一般，我們的解決方法是，給這兩個元素都設置浮動，讓他們貼緊或各占一邊。這種在盒模型的寬度固定的時候還比較好設置，但是當盒模型總寬度不固定(如它自己寬度設為100%)，我們需要設置另一個占滿剩余寬度的元素寬度為百分之多少的時候，就不怎么方便了。效果如下：
calc()完成自適應
或者是，盒模型中只有一個元素，這個元素寬度設置的是100%，如果這個元素還設置了其他盒模型屬性，如邊框、margin或padding，這樣就會讓你的盒子被撐破。這樣一來處理起來就非常麻煩，有時候甚至是無解的。
今天先森要介紹的calc()就是解決這些問題的。
什么是calc()?
學習calc()之前，我們有必要先知道calc()是什么？只有知道了它是個什么東西，在實際運用中更好的使用它。
calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
通俗的講，就是你可以通過calc()用算數表達式來設置指定元素的width、margin、padding、border等。
calc()語法
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
.div {
width: calc(expression);
}
其中"expression"是一個表達式，用來計算長度的表達式。
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智能的功能：
1.使用“+”、“-”、“*” 和 “/”四則運算；
2.可以使用百分比、px、em、rem等單位；
3.可以混合使用各種單位進行計算；
4.表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
5.表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
瀏覽器的兼容性及寫法
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
大家在實際使用時，同樣需要添加瀏覽器的前綴：
.elm {
/*設置給不能識別calc()的瀏覽器*/
width：90%;
/*Firefox火狐瀏覽器*/
width:-moz-calc(expression);
/*chrome safari等webkit內核瀏覽器*/
width:-webkit-calc(expression);
/*Standard 標準使用*/
width:calc(expression);
}
好了，對于calc()先森就介紹到這里，具體使用就靠大家自己摸索啦！
轉載請注明出處來自http://www.cnidcc.cn/ycss3_calc_sndzsygwm.html
川公網安備 51011202000104號