一.什么是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
