css3--calc()使用

css3新增的一个功能,可以计算元素的长度

例如说:一个百分百布局中,分左右两侧,中间需要一个分隔空间,使用padding或者margin则会超出100%,这时候使用calc()来计算 就很完美

calc()运算规则

  1.可以使用 + - * / 四则运算

  2.可以使用px em rem %等单位

  3.可以混合使用各种单位计算

  4.使用 + - 运算时,符号前后必须有空格

  5.使用 * / 运算时,前后可以没有空格,但是建议留有空格

calc()兼容

  pc端兼容还可以 IE9 ff4.0+  chrom19+

  移动端兼容不太好 只有 firefox for android 14.0”支持

使用的时候建议加上前缀

  

使用

效果如下  全屏100%展示 左右两边有10px间距

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

意思是(width-(padding+border)*2-margin)

  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com

css3-calc用法的更多相关文章

  1. css3 calc()的用法

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

  2. css3 calc():css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  3. css3 calc()

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

  4. CSS3 calc()函数使用

    1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...

  5. border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题

    box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...

  6. calc 用法以及原理

    CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. 它是CSS预处理器 .foo { width: 100 ...

  7. CSS3 calc()的使用

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

  8. css3 calc()方法详解

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

  9. CSS3 calc() 会计算的属性

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...

  10. 三栏布局之 css3 calc和 flex

    圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...

随机推荐

  1. Vbat 1.8V,接充電器,GPIO_CHG_EN pin 竟然是 high!

    Schematic : Precondition : Vbat 1.8V Plugin adapter Preloader doesn't enable GPIO_CHG_EN Origin : 做個 ...

  2. FileReader与FileWriter

    分别继承于InputStreamReader   OutputStreamWriter 所以: FileReader:new FileReader(“d:/back/string.txt”) =    ...

  3. LeetCode OJ--Insert Interval **

    https://oj.leetcode.com/problems/insert-interval/ 给出有序的区间来,再插入进去一个,也就是区间合并. 刚开始确立了几个思路,看要插入的区间的start ...

  4. WCF的学习之旅

    一.WCF的简单介绍  Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是MS为SOA (S ...

  5. SourceTree免注册并连码云

    1 在C:\Users\用户\AppData\Local\Atlassian\SourceTree目录下新建 accounts.json 其中AppData是隐藏文件夹 2 输入 [ { " ...

  6. 作为程序员,再也不想和PM干架了

    上周,又看见有程序和PM(产品经理)吵了起来,大致是因为晚上就要上线了,下午的时候PM来说要改点需求,但程序不愿意.兴许是天气热了,大家都很烦躁,于是一言不合就发飙了,最终还是程序老大介入才解决了问题 ...

  7. luogu P2746 [USACO5.3]校园网Network of Schools

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...

  8. PHP微信公众平台OAuth2.0网页授权,获取用户信息代码类封装demo(二)

    一.这个文件微信授权使用的是OAuth2.0授权的方式.主要有以下简略步骤: 第一步:判断有没有code,有code去第三步,没有code去第二步 第二步:用户同意授权,获取code 第三步:通过co ...

  9. Java基础教程:tutorialspoint-junit

    教程: 来自turorialspoint的JUnit教程(英文),官网:https://www.tutorialspoint.com/junit/index.htm 中文版本:http://wiki. ...

  10. DELPHI是怎么实现跨平台的?

    DELPHI是怎么实现跨平台的? 首先跨平台必须要兼容原来的语法,以线程的临界区对象为例: TCriticalSection = class(TSynchroObject){$IFDEF POSIX} ...