calc() 计算CSS属性值

calc()是css3的一个新增的功能，用来指定元素的长度。好比说，你能够使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，能够经过calc()计算获得元素的宽度。

calc(）语法：

加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是 <number> 类型的、被除数（/右面的数）必须是 <number> 类型的

calc()的运算规则
calc()使用通用的数学运算规则，可是也提供更智能的功能：

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 能够使用百分比、px、em、rem等单位；
3. 能够混合使用各类单位进行计算；
4. 表达式中有“+”和“-”时，其先后必需要有空格，如”widht: calc(100% + 5px)”；
5. 表达式中有“*”和“/”时，其先后能够没有空格，但建议留有空格。

calc()在less文件中的坑：

在Less里加入calc时确发现了有点问题，我在Less中这么写：

div {width : calc(100% - 250px);} 

结果Less把这个当成运算式去执行了，结果给我解析成这样：

div{width: calc(-150%);}

顿时懵逼，后来各类查度娘，才知道是因为less的计算方式跟calc方法有重叠，二者在一块儿有冲突，因而，在Less中把calc的写法改写成下面这样：

div {width: calc(~"100% - 250px");}

顺利经过编译

而当250px是一个变量的时候，要这样写：

div {　　@diff : 250px;　　width : calc(~"100% - @{diff}");　　}