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}");
　　}

搞定！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有