CSS3表达式calc( )

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”支持，其他的全军覆没。
实际使用时，同样需要添加浏览器的前缀，