么是calc()?

学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是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()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

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

浏览器的兼容性

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

大家在实际使用时,同样需要添加浏览器的前缀

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

关于css3的calc()的更多相关文章

  1. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  4. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

  5. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  6. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  7. [转]CSS3 使用 calc() 计算高度 vh px

    1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport    viewport:可视窗口,也 ...

  8. css3的calc属性不生效问题

    css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...

  9. CSS3表达式calc( )

    CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...

  10. css3的 calc属性无效问题解决

    css3的 calc:计算属性. 运算符两边需要加空格,才有效. 错误示例:.mystyle{width:calc(100%-25px)}这样是不生效的 运算符"+ - * /"左 ...

随机推荐

  1. 用js 将long类型转换成日期格式

    //扩展Date的format方法 Date.prototype.format = function (format) { var o = { "M+": this.getMont ...

  2. ECOS高可用集群

    此架构由8台PC .2台防火墙.2台24口三层交换机组成, 注意点: 1)Load Balance:Haprxoy+keepalived 实现高可用. 2)web:Nginx+php-fpm 3)DB ...

  3. AngularJs多重视图和路由的使用

    使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目, ...

  4. 关于用模拟器运行百度地图API无法定位的问题 - 不能用模拟器

    模拟器是没有办法定位,当你加入定位模块的时候,传出的参数都是空的. 定位的这个方法函数,是通过回调接口来实现,而且触发该事件的时候,需要经纬度位置改变.官方文档写得很清楚,简单点来说,就是你没有GPS ...

  5. linq中的分组和排序

    一.分组  group 组内成员 by 分组条件 into 组的信息 class Program { static void Main(string[] args) { string[] name = ...

  6. 不同版本(2.3,2.4,2.5) web.xml 的web-app头信息

    原址:点击打开链接 Servlet 2.3 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE w ...

  7. 怎样让pl sql developer 界面视图复位

    tools->preferences->user interface->appearance->reset docking工具-首选项-用户界面-外观-复位停放

  8. cmd实用指令

    具体可参考:http://www.jb51.net/os/windows/36986.html 以下是本人总结的一些比较实用的指令,仅仅只是自己的实战笔记 f: 进入F盘 同理 c: 进入C盘 cd ...

  9. Swift 学习笔记 (一)

    原创: 转载请注明出处 Extention try catch rxSwift internal  public  private var  let as       as? 强转 ? ! didSe ...

  10. 字段为空sql语句,设置当前模式

    delete from t_corpinfo  where CORPID='' and CORPNAME=''  该命令是删除字段为空的记录 SET CURRENT SCHEMA DB2INST1;