### **calc() 指定元素的長度** 說明： #### **什么是calc()?** calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能。用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值（動態值是使用表達式得到的值）。calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。 <br/> <br/> <br/> #### **calc()語法** calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示： ~~~ .elm { width: calc(expression); } ~~~ 其中"expression"是一個表達式，用來計算長度的表達式。 <br/> <br/> <br/> #### **calc()的運算規則** calc()使用通用的數學運算規則，但是也提供更智能的功能： 1. 使用“+”、“-”、“*” 和 “/”四則運算； 2. 可以使用百分比、px、em、rem等單位； 3. 可以混合使用各種單位進行計算； 4. 表達式中有“+”和“-”時，其**前后必須要有空格**，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的； 5. 表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。 <br/> <br/> <br/> #### **瀏覽器的兼容性** 瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符. 在實際使用時，同樣需要添加瀏覽器的前綴 ~~~ .elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); /*Standard */ calc(); } ~~~ <br/> <br/> <br/>