CSS3中的calc()

57 阅读 0 评论 38 点赞

我是靠谱客的博主暴躁故事，最近开发中收集的这篇文章主要介绍CSS3中的calc()，觉得挺不错的，现在分享给大家，希望可以做个参考。

什么是calc()?

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能;

MDN的解释为可以用在任何长度,数值,时间,角度,频率等处;

/* property: calc(expression) */
width: calc(100% - 80px);

可以用 + - * / 符号来进行运算;

但需要注意的是 + - 必须用空格隔开;

width: calc(100% -8px); /* 这样会出错,结果为0 */

width: calc(100% - 8px); /* 当 + -
符号用空格隔开时,运算成功 */

使用 * / 运算符时,必须保证有一个值为数值类型;

如果运算出错,结果为0;

IE9+,FF4.0+,Chrome19+,Safari6+;

还可以组合使用

也可以使用括号来提升运算优先级

calc()还是比较用的,比如说想居中一个绝对定位的元素,一般都是left:50%;top:50%;但是那样真的是居中吗?这种方式没有将元素的宽高计算在内.运用calc()可以实现之前要用js实现的居中

下边为部分参考资料:

https://developer.mozilla.org/en/docs/Web/CSS/calc

http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

以上就是暴躁故事为你收集整理的CSS3中的calc()的全部内容，希望文章能够帮你解决CSS3中的calc()所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。