有沒有人跟小編我一樣只要碰到數學算式就一個頭兩個大的呢，使用CSS來設計版型， 雖然版面修改上相對靈活，但每當版面有多個區塊組合時，就得分別計算出每個區塊的大小及間距，光想我現在就覺得頭痛了，而現今有個方便的CSS3屬性彷彿救世主般出現在我的職涯中，可讓瀏覽器去自行計算加、減、乘、除，現在就讓我們來認識「calc」吧！

支援瀏覽器：IE9+、Firefox4+、Chrome19+、Safari6+
支援運算：+ - * /
支援單位：px、em、rem、%

什麼是calc呢？

calc是英文單詞calculate（計算）的縮寫為CSS3的新功能，用來指定元素的長度。你可以使用calc()給元素的margin、padding、font-size與width等等屬性設定數值，最大的好處就是可以透過calc()的計算，得到響應式下各元素的長度，運用百分比、em、px和rem單位算出其寬度或高度，把惱人的計算問題交由瀏覽器去執行。

calc()的運算規則

• 使用加（+）、減（-）、乘（*）、除（/）運算
• 使用百分比（%）、px、em、rem等等單位，並相互混用
• 算式中有加（+）和減（-）時，前後必須要有空格隔開，width: calc(50%+50px) 這種沒有空格的寫法可是錯誤的喔
• 算式中有乘（*）和除（/）時，雖然前後可以沒有空格，但還是建議留有空格

使CSS具有運算功能，也因不需相同的單位，更增加其運算彈性。

    
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.myStyle {
  color: #fff;
  background-color: #ff0000;
  width: calc(20% + 100px);
}
</style>
<p class="myStyle">20%+100px</p>
    
  

    
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.myStyle{
  color:#fff;
  background-color: #ff0000;
  width:calc(100% / 5);
}
</style>
<p class="myStyle">100%/5</p>
    
  

利用calc()即可輕鬆做出等距的矩形，是不是很神奇呀！