【第22期】观点:IT 行业加班,到底有没有价值?

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常用功能的写法

作者: 阮一峰 日期: 2010年3月15日 随着浏览器的升级,CSS3已经可以投入实际应用了。 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍...
  • x619y
  • x619y
  • 2017-06-02 10:10
  • 65

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

实现CSS3 的跨浏览器功能(转)

  对 Web 设计师而言,CSS3 将带来许多全新的机会。现在,您可以使用 CSS3 来添加阴影、渐变、旋转和某些字体 —— 这一切都不需要用到减慢网页速度的图像。这个小节介绍一些新的、令人激动的特性,您可以直接使用它们而不会导致跨浏览器问

CSS3设计边框忽隐忽现功能

css3功能很强大哈,实现动画功能很方便,今天在这里分享怎么实现类似星星眨眼,忽隐忽现,一亮一闪的功能…… 同样,我们先知道CSS3的几个属性: 1. box-shadow:向框添加一个或多个...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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