什么是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()的更多相关文章

  1. css3中的calc的使用

    最近在布局的时候遇到一个问题,在页面中的左侧是侧边栏,右边是内容区域,内容区域中有一个固定定位的标签页,在设置固定定位的标签设置宽度的时候应该是内容区域的宽度,而固定定位的时候相对于是窗口的宽度,所以 ...

  2. Css3中的 calc()使用

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

  3. less中使用calc

    css3中可以使用calc()来实现自适应布局 例如:width:“calc(100%  - 25px)” width: calc(expression); ==> expression是一个表 ...

  4. 浏览器中使用calc不识别

    在使用css3中的calc运算函数时,发现浏览器不识别,当时代码是这样的 width:calc(100%-50px); 经过查询官网原来发现这里有个需要注意的地方就是在进行加减运算的时候,必须在运算符 ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. css3中的布局相关样式

    web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

  7. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  8. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

  9. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

随机推荐

  1. RESTful 良好的API设计风格

    1.使用名词而不是动词 Resource资源 GET读 POST创建 PUT修改 DELETE /cars 返回 cars集合 创建新的资源 批量更新cars 删除所有cars /cars/711 返 ...

  2. python 字符串分割

    字符串分割,可以用split,rsplit方法,通过相应的规则来切割成生成列表对象 info = 'name:haha,age:20$name:python,age:30$name:fef,age:5 ...

  3. [CS231n-CNN] Linear classification II, Higher-level representations, image features, Optimization, stochastic gradient descent

    课程主页:http://cs231n.stanford.edu/ loss function: -Multiclass SVM loss: 表示实际应该属于的类别的score.因此,可以发现,如果实际 ...

  4. android.support.v4包中的LruCache源码简读

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  5. .NET转Java

    懂C#的话,转Java也不是那么难,毕竟,语言语法还是相似的.尝试了下Java,说说自己的体会吧. 一,Java和C#都是完全面向对象的语言.在面向对象编程的三大原则方面,这两种语言接近得不能再接近. ...

  6. node.js JS对象和JSON字符串之间的转换

    JSON.stringify(obj)将JS对象转为字符串. var json = { aa: ['sdddssd'],   bb: [ '892394829342394792399', '23894 ...

  7. 移除了css框架，世界干净了

    在之前的webapp项目里,我使用了bootstrap作为三方的css库,只调取了其中一部分源码的less使用,大部分代码仍然是自己写的. 自己的代码也是参照bootstrap的目录结构和它的一些规范 ...

  8. 开放产品开发（OPD）：OPD框架

    在 开放产品开发(OPD):开篇 中讲了一下OPD是什么,以及它主要指引的方法,这篇文字将给大家介绍一下OPD框架. 一个公司有三种经营模式,像游戏代理的属于运营型,做企业定制项目管理软件的属于项目型 ...

  9. 【Spark】----Spark on Yarn

    最近从Hadoop 1.x 转到Hadoop 2.x 同时将一些java 程序转为Scala的程序将平台上的代码减少了很多,在实施的过程中,开到一些Spark相关的YARN的部署上都是基于之前的Had ...

  10. 2015 Multi-University Training Contest 1 - 1001 OO’s Sequence

    OO’s Sequence Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5288 Mean: 给定一个数列,让你求所有区间上满足 ...