CSS函数cale()的使用

calc(calculate的简写)是一个函数，用来指定元素的长度或者宽度，是css3新增的功能，通过计算出来的值就是元素的长度或者宽度

HTML:

<div class="box">盒子<div>

CSS:

.box {
    width: calc(100% - (10px + 20px) * 2);
}

calc()的运算规则

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

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在Chrome19+、Safari6+都得到较好支持