calc() 计算CSS属性值
calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()语法:
加 (+)、减(-)、乘(*)、除(/),注意的是:乘数中至少要有一个是 <number>
类型的、被除数(/右面的数)必须是 <number>
类型的
calc()的运算规则
calc()使用通用的数学运算规则,但是也提供更智能的功能:
- 使用“+”、“-”、“*” 和 “/”四则运算;
- 可以使用百分比、px、em、rem等单位;
- 可以混合使用各种单位进行计算;
- 表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(100% + 5px)”;
- 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
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}");
}
搞定!