CSS3的calc()使用

一.什么是calc()?###

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

二.calc()能做什么？###

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

三.calc()语法###

   .elm{
         width:calc( expression)
   }
   其中“expression”是一个表达式，用来计算长度的表达式

1.使用“+”、“-”、“” 和 “/”四则运算；
2.可以使用百分比、px、em、rem等单位；
3.可以混合使用各种单位进行计算；
4.表达式中有“+”和“-”时，其前后必须要有空格，如"widht: 5.calc(12%+5em)"这种没有空格的写法是错误的；
6.表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。

四.实例###

      <style>
        .demo { 
              width: 300px; 
              background: #60f; 
              padding: 3px 0;
         }
        .box { 
              background: #f60;
              height: 50px; 
              padding: 10px;
              border: 5px solid green;
              width: 90%;
             /*写给不支持calc()的浏览器*/ 
             width:-moz-calc(100% - (10px + 5px) * 2);
             width:-webkit-calc(100% - (10px + 5px) * 2); 
             width: calc(100% - (10px + 5px) * 2);
         }
      </style>
      <div class="demo"> <div class="box"></div></div>

css3-calc-step3.jpg