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. 3.3V与5V电平双向转换

    http://www.amobbs.com/thread-5541344-1-2.html 3.3V转5V:S3输入为0V时,NMOS管导通,S5＝S3＝0V:S3输入为3.3V时,NMOS管截止,S ...

  2. 读 Zepto 源码系列

    虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧. 源码版本 本文阅读的源 ...

  3. HDU5087 Revenge of LIS II (LIS变形)

    题目链接:pid=5087">http://acm.hdu.edu.cn/showproblem.php?pid=5087 题意: 求第二长的最长递增序列的长度 分析: 用step[i ...

  4. C# 获得当前 进程 或 线程的ID

    如果获得当前进程的Id用: Process[] processes = Process.GetProcesses(); foreach(Process process in processes) {  ...

  5. spring事務

    spring事物 spring事物其实就是对数据库事物的一种支持,没有数据库事物的话,spring本身是不能提供事物支持的: 在最开始使用原始的jdbc连接数据库进行炒操作是, 获取连接后可以使用co ...

  6. Selenium2+python自动化48-登录方法（参数化）

    前言 登录这个场景在写用例的时候经常会有,我们可以把登录封装成一个方法,然后把账号和密码参数化,这样以后用的登录的时候,只需调用这个方法就行了 一.登录方法 1.把输入账号.输入密码.点击登录按钮三个 ...

  7. CASpringAnimation的使用

    CASpringAnimation的使用 效果 源码 https://github.com/YouXianMing/Animations // // CASpringAnimationControll ...

  8. 使用命名参数处理 CallableStatement

    简介:JDBC 中的语句处理 在 JDBC 应用程序中,JDBC 语句对象用于将 SQL 语句发送到数据库服务器.一个语句对象与一个连接相关联,应用程序与数据库服务器之间的通信由语句对象来处理. JD ...

  9. wikioi 1163 訪问艺术馆 树形dp

    递归建树,由题知该树是一棵二叉树,且除根节点外其它点的度为0或2. dp[i][j]表示来到第i个走廊(还未走过这条走廊)还剩下j时间,能拿到最大的画的数量. dp[i][j]=max(dp[i][j ...

  10. vs 默认的INC和LIB

    用户环境变量添加 INCLUDE=C:\inc;c:\inc2 LIB=c:\lib 编辑文件C:\Users\Administrator\AppData\Local\Microsoft\MSBuil ...