calc()的使用

看到這個，我相信很多人都沒有見過或者見過但沒有用過，我和大部分人一樣，今天是第一次見。

今天我在網上學習時，看到這個屬性，覺得很奇怪，還可以計算。以我之前學到的，less,sass可以計算，我沒想過css也可以，是以我就開始研究這個屬性。

1、什麼是calc()

calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能;MDN的解釋為可以用在任何長度,數值,時間,角度,頻率等處;等。

2、他能做什麼

calc()可以給元素的做計算，可以給一個div元素，使用百分比、em、px和rem機關值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”。

3、運算規則

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

4、相容性

接下來我們說說相容性，我相信隻要提到相容性，大家就會很頭疼，因為這個問題很麻煩。 但是calc（）的相容性還可以，他相容IE9+,FF4.0+,Chrome19+,Safari6+，當然也需要在前面加上各個浏覽器的廠商的識别符。 還有一點讓人頭疼的是，他不相容移動端，不過隻有firefox for android 14.0這個可以相容，其他的都不可以