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. 2017微软 MVP 数据实践技术活动日（北京站）

    Power BI | 交互式数据可视化 BI 工具 EXCEL BI :无所不能的业务数据分析利器 EXCEL +POWERBI=EXCEL BI https://edu.hellobi.com/co ...

  2. 免费的Bootstrap管理后台模板集合

    Free Bootstrap Admin Templates for Designers 1. Admin Lite AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高 ...

  3. 使用jQuery异步传递含复杂属性及集合属性的Model到控制器方法

    Student类有集合属性Courses,如何把Student连同集合属性Courses传递给控制器方法?     public class Student     {         public ...

  4. java四舍五入保留两位小数4种方法

    4种方法,都是四舍五入,例: import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...

  5. [转]C++之运算符重载(1)

    在前一节中曾提到过,C++中运行时的多态性主要是通过虚函数来实现的,而编译时的多态性是由函数重载和运算符重载来实现的.这一系列我将主要讲解C++中有关运算符重载方面的内容.在每一个系列讲解之前,都会有 ...

  6. 【ContestHunter】【弱省胡策】【Round5】

    反演+FFT+构造+DP 写了这么多tag,其实我一个也不会 A 第一题是反演……数据范围10W,看着就有种要用FFT等神奇算法的感觉……然而蒟蒻并不会推公式,只好写了20+10分的暴力,然而特判30 ...

  7. 用java解析在OpenStreetMap上下载的地图数据（SAX版，适合比较大的xml文件）

    java程序如下: package gao.map.preprocess; import java.io.BufferedWriter; import java.io.File; import jav ...

  8. vue设置多入口教程

    官方脚手架搭建vue项目 在src 目录下复制app内容创建test.vue,demo.vue, main.js复制main.js内容demo.js,test.js,修改一下内容 在根目录下创建tes ...

  9. 再谈javascript图片预加载技术

    图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...

  10. 最全Pycharm教程（11）——Pycharm调试器之断点篇

    最全Pycharm教程(1)--定制外观 最全Pycharm教程(2)--代码风格 最全Pycharm教程(3)--代码的调试.执行 最全Pycharm教程(4)--有关Python解释器的相关配置 ...