有没有人跟小编我一样只要碰到数学算式就一个头两个大的呢，使用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()即可轻松做出等距的矩形，是不是很神奇呀！