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) + - 周围必须有空格
  • xiongzhengxiang
  • xiongzhengxiang
  • 2015年12月30日 20:58
  • 602

css样式可以使用百分比的属性--总结

css样式可以使用百分比的属性–总结可以使用百分比的样式属性: 定位:top,right,bottom,left; 盒模型:height,width,margin,padding, 背景:bac...
  • hanangjie
  • hanangjie
  • 2015年12月18日 14:10
  • 2287

css3的cal()功能初现

今天在Codepen上看案例,发现有很多css中给属性添加了cal()值 这是一个平时不曾注意过的属性值,外表看起来像个函数,但是函数怎么会出现在css中? 在网上查找和学习了一下...
  • sinat_30975247
  • sinat_30975247
  • 2015年11月18日 17:37
  • 1077

CSS揭秘完整版

  • 2016年11月12日 11:55
  • 39.26MB
  • 下载

Linux中的date、cal、bc三个简单命令

1.date命令:显示日期与时间的命令 (1).在终端输入命令date,可以知道Linux操作系统的当前时间,如下图所示: (2).其中date命令又可以带一些参数,如果我们想让当前的...
  • u012561176
  • u012561176
  • 2015年05月14日 22:05
  • 1167

css3八大新功能

1)圆角 这个功能已经在诸如Mozilla,Webkit等浏览器广泛使用,对Web设计者来说无疑是最受期待的,然而IE仍然没有要支持这个功能的迹象。 2)多背景 这个功能是我最期待的,但向后兼容...
  • chenxin1017
  • chenxin1017
  • 2016年07月21日 13:03
  • 657

CSS

css基本语法样式 叠层样式表,主要用来定义HTML内容在浏览器内显示的样式。如文字大小,颜色,图片样式等。 在HTML文件中中 CSS学习 ...
  • u011085734
  • u011085734
  • 2016年11月29日 10:59
  • 139

CSS3和js超酷iPhone样式科学计算器插件

  • 2016年08月25日 13:07
  • 66KB
  • 下载

cal 命令

cal命令可以用来显示公历(阳历)日历。公历是现在国际通用的历法,又称格列历,通称阳历。“阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”。 1.命令格式: ca...
  • k122769836
  • k122769836
  • 2013年03月01日 10:52
  • 1523

最爱的曲和作者

曲名 作曲与编曲 A City of Sadness悲情城市 S.E.N.S. Ancient Path陵稜散 周志华&江建谊 Jambia Dan...
  • qq_32115439
  • qq_32115439
  • 2017年05月26日 22:01
  • 536
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的cal()功能初现
举报原因:
原因补充:

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