CSS3 的 calc() 使用

作者:赵金添 分类: 前端 发布于:2016-3-17 18:37 ė818次浏览 60条评论
参考:
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

预览:
http://my.codelab.cn/2016-03-17-1/calc.html

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

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

浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。


代码:
<style>
  .test {
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);

    background: #eee;
  }
</style>
<div class="test">我的宽度为100% - 50px</div>

本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部