1、calc是什么？

calc是英文单词calculate(计算)的缩写，用于动态计算长度值。

  • calc()函数支持 "+", "-", "*", "/" 运算；
  • + 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
    * 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
  • 可以使用百分比、px、em、rem等单位；

2、浏览器兼容性

http://caniuse.com/#search=calc

3、calc使用

calc()主要应用在流体布局上，可以通过calc()计算得到元素的宽度。

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

4、示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>CSS3 calc()函数应用</title>

        <style>

            * {

                padding: 0;

                margin: 0;

            }

            .test {

                width: calc(100% - 50px);

                border: 1px solid red;

            }

        </style>

    </head>

    <body>

        <div class="test">我的宽度为100% - 50px</div>

    </body>

</html>

效果：

CSS3 calc()函数使用的更多相关文章

  1. CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

    1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...

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

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

  3. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  4. css3 calc()方法详解

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  5. css3 calc()

    概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...

  6. calc()函数的使用

    calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...

  7. CSS3 calc实现滚动条出现页面不跳动

    什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可 ...

  8. css3 calc()的用法

    转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...

  9. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

随机推荐

  1. Spring @Value 用法小结，#与$的区别

    20161016更新:这货其实是SpEL的功能,来这里看看吧: Spring 4 官方文档学习(五)核心技术之SpEL 起因 一直的用法是 @Value("${jdbc.driverClas ...

  2. iOS内存优化及排查方法

    1.IBOutlet 对象需要release 2.不停的往UIView,特别是UIScrollView上add相同SubView.一定要记得清除之前的SubView,并且在dealloc函数中执行该方 ...

  3. [iOS] UIView的clipsTobounds属性

    如题,有两个view: view1,view2view2添加view1到中,如果view2大于view1,或者view2的坐标不全在view1的范围内,view2是盖着view1的,意思就是超出的部份 ...

  4. 转： "SMTP 服务器无法识别在 Mac 2011 Outlook 中发送电子邮件时错误。错误 17092"

    在 Mac 2011 Outlook 中发送电子邮件时,您可能会收到下面的错误消息: 无法发送邮件.SMTP 服务器无法识别任何 Outlook 所支持的身份验证方法.请尝试更改帐户设置中的 SMTP ...

  5. IOC详解和Unity基础使用介绍

    说起IOC,可能很多初学者不知道是用来做什么的,今天正好有点时间,就来扫扫盲,顺便巩固下自己. IOC全称是Inversion Of Control,意为控制反转(这些自然百度也有),可什么是控制反转 ...

  6. python文本 字符与字符值转换

    python文本 字符与字符值转换 场景: 将字符转换成ascii或者unicode编码 在转换过程中,注意使用ord和chr方法 >>> print(ord('a'))    97 ...

  7. 【liunx】使用xshell连接虚拟机上的CentOS 7，使用xhell连接本地虚拟机上的Ubuntu, 获取本地虚拟机中CentOS 7的IP地址，获取本地虚拟机中Ubuntu 的IP地址，Ubuntu开启22端口

    注意,如果想用xshell去连接本地虚拟机中的linux系统,需要本地虚拟机中的系统是启动的才能连接!!!!! ============================================ ...

  8. VC6 下 libpng 库的编译与初步使用

      VC6 下 libpng 库的编译与初步使用 目录 libong 库的介绍 VC6 下 libpng 的编译 下载 libpng 与 zlib 进行编译 得到 .lib 文件 初步使用 对 VC6 ...

  9. cocos2d-x avdrid 试例

    今天将cocos2d-x的示例项目tests编译到android真机运行,以及如何创建cocos2d-x的android项目. 打开cocos2d-x的tests项目,路径为:D:\cocos2d-x ...

  10. .NET：事务、并发、并发问题、事务隔离级别、锁等相关资料整理

    这里面的有三篇文章,必须要读读:http://technet.microsoft.com/en-us/library/ms189130(v=sql.105).aspx. 这里有一个系列,我还没有读:h ...