一、前言

  calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素,当然想到的第一个就是使用margin:0 auto;或者使用定位和margin结合的这种简单的方法,当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。

二、使用方法

  calc()中的参数是一个计算公式,通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器,让页面能够自己得出宽度或数值的结论,这些计算公式也都是很简单的加( + )减( - )乘( * )除( / )运算。

div{
width: calc(15px + 15px);//30px
width: calc(15px - 10px);//5px
width: calc(15px*2);//30px
width: calc(15px/3);//5px
}

  从上面的例子中可以看出,加( + )减( - )运算中需要计算的数值与运算符之间是有空格的,并且这空格是不能省略的,而乘( * )除( / )运算里的空格是可以省略的。

  calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的,并且单位可以混在一起计算:

div{
width: calc(3em + 5px);//53px
}

三、calc()嵌套

  calc()是一个函数,那么函数是可以支持嵌套的,可以通过不同的公式来算出最后的结果。

div{
--widthA: calc(10px + 190px);
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);//50px
}

四、简单的居中

  calc()可以计算宽度以后,居中显示的实现就可以有很多方法,padding或者margin,但它的原理都是一样的。

div{
padding: 0 calc((100% - 1024px)/2);
}

  假设中间的内容是固定宽度1024px,那么获取父级的宽度或者窗口的宽度100%,然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度,将它们一分为二(/2)就可以实现中间1024px宽度的内容一直居中了。

五、兼容性

  calc()的兼容性已经很高了,IE9+、FF4.0+、Chrome和Safari6+都已经支持calc()的应用,但还是要加上不同浏览器的前缀。

div{
-moz-calc(expression);
-webkit-calc(expression);
calc(expression);
   //expression为计算公式
}

Css3新属性:calc()的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  4. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  5. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  6. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

  7. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  8. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  9. css3新属性运用

    1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...

随机推荐

  1. webservice 开发规范

    JAVA中共有三种WebService规范,分别是:JAXM&SAAJ.JAX-WS(JAX-RPC).JAX-RS 下面类分别简要介绍一下这三个规范 1. JAX-WS (Java API ...

  2. webform ajax 异步请求

    第一种就是对应方法的请求 虽然对应方法 但还是会刷新页面 webform是基于事件的 每次请求都会出发pageload <script> $(function () { $("# ...

  3. Linux 系统安全设置

    一.SElinux安全子系统策略. 临时修改 命令:setenforce 0 #临时关闭selinux. 命令:setenforce 1 #临时开启selinux 命令:getenforce      ...

  4. openvpn 初步使用

    服务端:Centos 7.2 openvpn 2.4.3 客户端:Windows 10 安装包 openvpn的官网在国内访问不了,服务端通过yum安装,客户端在第三方网站下载的 一般的国内源应该都包 ...

  5. Bootstrap3基础 text-right/left/center 设置标题右对齐、左对齐、居中

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. [译]课程 1: 使用 Quartz

    译者注: 原文在这 Lesson 1: Using Quartz 在你使用调度器之前, 你需要先实例化(能猜到是谁么?). 要实例化, 请使用 ISchedulerFactory 的实现. 译者注: ...

  7. .Net 读取配置文件 xml

    直接解析XML文件 1.System.Xml.Linq命名空间下提供可以使用linq查询的类,使用linq to xml读取也很方便. 2.还可以使用System.Xml.Serialization类 ...

  8. CSS常用伪类

    css伪类 :after 在元素后面插入内容 :hover 鼠标移入时进行 :before 在元素前面插入内容 :link 未选中的链接 :active 点击后产生什么变化 :nth-child 匹配 ...

  9. python链接Hive

    之前一直用thrift链接Hive,但在运行时总出现问题,一直报缺少模块的错误,装了这个模块,又报缺少那个模块,连了半天,全是泪啊! 原来thrift链接Hive的.py文件后续没人维护,是连不上的. ...

  10. 廖雪峰JavaScript学习笔记(基础及数据类型、变量)

    先睹为快 alert('我要学JavaScript!'); Run: 基本语法: 1.每个语句以;结束,不强制 2.语句块用{...} 3.//单行注释,/*...*/ 多行注释 数据类型: 1.不区 ...