CSS3表达式calc( )
第一次看到calc( )时,不太相信calc()是css中的部分。因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时尝试了一下,完美。接下来就和大家分享一下CSS表达式calc( )
calc( )我们可以把他理解为一个函数function。cale是英语单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如在写自适应时候,就可以用cale( )给元素的border、margin、padding、font-size、width和定位等属性设置为动态值。就可以自动计算值了。
calc( )完全可以照我们小学学的加(+)、减(-)、乘(*)、除(/)一样来计算,也遵守四则运算,但是要自己带单位,如百分比、px、em、rem等单位,里边有“+”和“-”时,其前后必须要有空格,没有空格浏览器不会识别,也不会报错,有“*”和“/”时,其前后可以没有空格,但建议留有空格,一家人就要齐齐整整嘛。
举个栗子
文案设计的置顶小图标居右却不靠边,给了position:fixed以后,这个小图标就会相对于浏览器窗口定位,当窗口在1200px和1920px之间时,小图标距离右边的距离是定死的,就会遮挡内容部分。当然也可以用js给小图标定位,获取右侧导航条位置,随之下移,这样就要先获取屏幕高度,然后到一定高度小图标出现,还要获取导航条位置,让小图标随导航条下移,喏,要是换做用cale( )就只需要一个表达式了,
看效果,在窗口为1371px和1801px时,返回顶部按钮依然在相同的位置。
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
实际使用时,同样需要添加浏览器的前缀,