什么是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. iOS开发-NSDate使用

    时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时间的总秒数.它也被称为 Unix 时间戳(Unix Timestamp). 下面是iOS中时间戳 与 时间之间的转换方法: ...

  2. 转载好文:如何进行基于情境数据的个性化EDM数据营销

    根据Adobe和DMA(Direct Marketing Association)的<实时营销洞察报告> (Real-Time Marketing Insights Study),77%的 ...

  3. Go语言TCP/UDP Socket编程

    1. TCP编程 TCPClient // TCPClient project main.go package main import ( "fmt" "net" ...

  4. SNF开发平台WinForm之九-代码生成器使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    下面就具体的使用说明: 1.获取代码生成器的授权码(根据本机)-----还原数据库-------改config-----代码生成器 改代码生成器Config 2.登录代码生成器 3.查看是否连接成功 ...

  5. MyBatis 入门

    什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集.MyBatis ...

  6. 去掉NSString中的HTML标签

    经常出现字符串带有html标签.下面有个方法一步到位去掉HTML标签 <span style="font-family: 'comic sans ms', sans-serif; co ...

  7. ionic 添加应用图标与启动页

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  8. Mac常用基本命令/常用Git命令

    Git地址: https://github.com/mancongiOS/command-line基本命令 目录/文件的操作 mkdir "目录名" 在当前路径下创建一个文件夹 m ...

  9. 一起Polyfill系列:让Date识别ISO 8601日期时间格式

    一.什么是ISO 8601日期时间格式 ISO 8601是国际标准化组织制定的日期时间表示规范,全称是<数据存储和交换形式·信息交换·日期和时间的表示方法>. 示例: 1. 2014-12 ...

  10. IOS开发UI基础UILabel属性

    UILabel属性 1.text:设置标签显示的文本. 2.attributedText:设置标签属性文本. Ios代码 NSString *text = @"first";  N ...