标签:百分比 数学 个数 小数 规则 好处 就是 设置 混合
calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()语法:
加 (+)、减(-)、乘(*)、除(/),注意的是:乘数中至少要有一个是 <number>
类型的、被除数(/右面的数)必须是 <number>
类型的
calc()的运算规则
calc()使用通用的数学运算规则,但是也提供更智能的功能:
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}");
}
搞定!
标签:百分比 数学 个数 小数 规则 好处 就是 设置 混合
原文地址:http://www.cnblogs.com/yuanxinghuo/p/7867043.html