css3 calc()

.foo {
    height: calc(100% - 50px);
}
什么是calc()

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

calc()能做什么?

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

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.elm {
  width: calc(expression);
}
//其中"expression"是一个表达式,用来计算长度的表达式。
calc()的运算规则

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

运算百分比

除了基本的px,%,em等,还有:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值

兼容性:

桌面 PC
Chrome:自 26 版起就完美支持
Firefox:自 19 版起就完美支持
Safari:自 6.1 版起就完美支持
Opera:自 15 版起就完美支持
IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
大家在实际使用时,同样需要添加浏览器的前缀

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

移动设备
Android:自 4.4 版起就完美支持
iOS:自 iOS8 版起就完美支持

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • sass里可以进行计算,比如宽度,高度等,类似下面的语法 element{ width: 100px + 50px...
    avery1阅读 472评论 0 0
  • 摘自http://www.w3cplus.com/css3/how-to-use-css3-calc-functi...
    Lareina林暖暖阅读 781评论 0 0
  • 什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运...
    ddai_Q阅读 419评论 0 1
  • 一.什么是calc()?### calc()从字面我们可以把他理解为一个函数function。其实calc是英文单...
    Devour_z阅读 717评论 0 1
  • 什么是calc()? calc()是CSS3的一个新功能,能够动态地计算长度值,任何长度值都可以使用calc()来...
    润桦阅读 313评论 0 0