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这次则牛逼了一次,原生支持标准的不带前缀的写法了。





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

相关文章推荐

css3 cal 用法

1 语法 calc(); 函数名和括号间不能有空格 calc(1px + 2vm) + - 周围必须有空格

CSS3样式过渡功能

  • 2015-06-26 15:32
  • 171KB
  • 下载

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

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

ie支持css3部分功能

  • 2013-05-11 22:00
  • 94KB
  • 下载

超酷HTML5和CSS3实现的登录及其注册功能表单

日期:2012-4-6  来源:GBin1.com 在线演示  本地下载 过去我们开发登录和注册功能大都使用javascript来实现,今天我们介绍的这个登录及其注册表单不走常人路...
  • jjfat
  • jjfat
  • 2012-04-10 14:57
  • 1062

CSS3实现头像旋转功能

  • 2016-05-30 10:55
  • 124KB
  • 下载

使用CSS3绘制转盘图抽奖功能

再换一个绘图方式,使用CSS3绘制转盘图抽奖功能 截图: 代码: 使用CSS3绘制转盘图抽奖功能 //页面加载执行事件,常用 wind...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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