calc( )计算css属性值

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

calc(）语法：

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

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

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(100% + 5px)”；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
calc()在less文件中的坑：

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

calc( )计算css属性值相关推荐

js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...
【CSS 属性值分类: 指定值,计算值,使用值,实际值的区别】
CSS 属性值的分类 CSS 属性值的分类 ⑴ 指定值 ⑵ 计算值 ⑶ 使用值 ⑷ 实际值 ♣ 结束语和友情链接 CSS 属性值的分类开发者设定的指定值 ≠ 实际值的情况浏览器和属性值的 ...
getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值
object.getComputedStyle 获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
理解 CSS 属性值语法
本文转载自:众成翻译链接:http: //www.zcfy.cc/article/390 万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用.如果你曾看 ...
css提取页面元素唯一性_下面这个函数，能够获取一个元素的任意 CSS 属性值。...
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
CSS属性值之百分数
百分数由一个数字和一个百分号组成,数字和百分号之间,不允许出现空格.百分数可以是整数或小数,可以是正数或负数.如果数字为0,则可以省略百分号. 百分比的值几乎总是相对于另一个值(如长度单位)计算得到的 ...
图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...

calc( )计算css属性值

calc(）语法：

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

calc()在less中的解析问题：

calc( )计算css属性值相关推荐

最新文章

热门文章