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. VPS 虚拟私有主机 Virtual Private Server

    VPS技术介绍 利用最新虚拟化技术Xen在一台物理服务器上创建多个相互隔离的虚拟私有主机(“Virtual Private Server”简称 “VPS”).这些VPS以最大化的效率共享硬件.软件许可 ...

  3. Tasker 模拟重复点击按钮

    http://stackoverflow.com.80bola.com/questions/21544271/android-tasker-app-advance-input-shell-comman ...

  4. 74HC125 74HCT125 74LV125 74LVC125

    74HC125; 74HCT125Quad buffer/line driver; 3-state The 74HC125; 74HCT125 is a quad buffer/line driver ...

  5. sql 递归查询所有的下级

    --> 生成测试数据表: [tb] IF OBJECT_ID('[Users]') IS NOT NULL     DROP TABLE [Users] GO CREATE TABLE [Use ...

  6. 埃及分解：将2/n分解成为1/x+1/y的格式

    算法 古埃及以前创造出灿烂的人类文明,他们的分数表示却非常令人不解.古埃及喜欢把一个分数分解为类似: 1/a + 1/b 的格式. 这里,a 和 b 必须是不同的两个整数,分子必须为 1 比方,2/1 ...

  7. MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹

    为用户创建专属上传文件夹后,如果想在其中再创建分类子文件夹,该怎么做?可以在提交文件的视图中再添加一个隐藏域,并设置 name="uploadContext". 相关兄弟篇: MV ...

  8. Android跳转各种系统设置界面-总结

    来自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0921/8536.html View btn1 = this.findVi ...

  9. Memcached 集群架构方面的问题

    *  集群架构方面的问题 o memcached是怎么工作的? o memcached最大的优势是什么? o memcached和MySQL的query cache相比,有什么优缺点? o memca ...

  10. Linux 防火墙 iptables基本操作

    1:临时性关闭开启防火墙,重启后失效开启service iptables start关闭service iptables stop/etc/rc.d/init.d/iptables stop 2:永久 ...