css3的cal()功能初现

原创 2015年11月18日 17:37:30

今天在Codepen上看案例,发现有很多css中给属性添加了cal()值

这是一个平时不曾注意过的属性值,外表看起来像个函数,但是函数怎么会出现在css中?



在网上查找和学习了一下,才知道这是css3的一个新增功能,用来指定元素的长度,比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。


calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。


calc()的运算规则

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

使用“+”、“-”、“*” 和 “/”四则运算; 
可以使用百分比、px、em、rem等单位; 
可以混合使用各种单位进行计算; 
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的; 
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器支持

firefox 4.0+已经开支支持calc()功能,不过要使用-moz-calc()私有属性,chrome从19 dev版,也开始支持私有的-webkit-calc()写法,IE9这次则牛逼了一次,原生支持标准的不带前缀的写法了。





版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS学习2(值和单位)

数字 CSS中有两类数字,整数和实数。 百分数 百分数值几乎总是相对于另一个值,这个值可以是任意的:可能是同一元素另一个属性的值,也可以是从父元素继承的一个值,或者是祖先元素的一个值。接受百...
  • exialym
  • exialym
  • 2016年06月11日 11:30
  • 253

CSS3实现头像旋转功能

  • 2016年05月30日 10:55
  • 124KB
  • 下载

html5+css3立体3D点击眼睛游戏功能

  • 2016年07月28日 01:06
  • 44KB
  • 下载

利用CSS3中animation属性实现雪花飘落功能

先介绍一下CSS3中的animation的新特性

CSS3样式过渡功能

  • 2015年06月26日 15:32
  • 171KB
  • 下载

HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图。 效果图: 看起...

ie支持css3部分功能

  • 2013年05月11日 22:00
  • 94KB
  • 下载

CSS3实例教程:详解calc()函数功能

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的cal()功能初现
举报原因:
原因补充:

(最多只允许输入30个字)