它的出现还真的蛮令人惊喜的,很适用于百分比宽度。之前我们有box-sizng,而今又多了一个它,并且,calc的实用性更高。我们可以在border、margin、pading、font-size和width等属性上做一些加减乘除,简单拿width举例:

.wrap {
background-color: #dee;
height: 200px;
padding: 40px;
display: inline-block;
width: calc(100% - 2 * 40px);
}

书写注意点:

width: calc(100%-2*40px);//错误的写法

(这是我在测试的时候踩的坑→ →)

运算符前后加一个空格,不然浏览器可能会无法识别哟~~

其它貌似也没有什么了,最后看一下兼容性吧,:)

四则运算 calc()的更多相关文章

  1. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  2. 【实践】js实现简易的四则运算计算器

    最近看了一个大神推荐的某公司面试程序员的js 面试题,题目是用js 做一个计算器于是跟着大神的思想自己做了一下 ps:功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中. 闲话不多说先上css代码 & ...

  3. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  4. CSS3 calc()的使用

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

  5. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  6. css3 calc()方法详解

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

  7. 使用css3中calc()进行自适应布局

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

  8. calc()问题

    什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc() 从字面我们可以把他理解为一个函数function.其 ...

  9. C#实现eval 进行四则运算

    昨天在园子里看到有园友,写了相同标题的一篇文章.重点讲的是中缀表达式转换为后缀表达式的算法,但是实现的四则运算 有bug.其实我没看之前也不懂什么是 中缀和后缀表达式,之前有用过js eval 内置函 ...

随机推荐

  1. BZOJ2809:[APIO2012]dispatching

    浅谈左偏树:https://www.cnblogs.com/AKMer/p/10246635.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php? ...

  2. Image Sub-pixel interpolation by Verilog

    bilinear interpolation -------------------------------------------------------- input a0  a1 b0  b1 ...

  3. 【转】Pro Android学习笔记(十七):用户界面和控制(5):日期和时间控件

    目录(?)[-] DatePicker和TimePicker控件 DigitalClock和AnalogClock控件 DatePicker和TimePicker控件 使用DatePicker和Tim ...

  4. JVM类加载(4)—加载器

    定义: 虚拟机设计团队把类加载阶段中“通过一个类的全限定名来获取描述此类的二进制字节流”这个动作放到虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称之为“类加载器 ...

  5. C#设计模式(7)——适配器模式

    一.概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 二.模型 三.代码实现 using System; /// 这里以 ...

  6. 问题:sqlserver if;结果: SqlServer if else和case

    SqlServer if else和case 分类: SQLSERVER 2013-03-01 16:51 11328人阅读 评论(0) 收藏 举报 行转列 目录(?)[+] if else 要提示的 ...

  7. 报错apachectl -t

    httpd: apr_sockaddr_info_get() failed for wwwhttpd: Could not reliably determine the server's fully ...

  8. spring----IOC注解方式以及AOP

    技术分析之Spring框架的IOC功能之注解的方式 Spring框架的IOC之注解方式的快速入门 1. 步骤一:导入注解开发所有需要的jar包 * 引入IOC容器必须的6个jar包 * 多引入一个:S ...

  9. 树莓派 Learning 002 装机后的必要操作 --- 04 添加软件源 之 添加公钥 --- 解决“由于没有公钥,无法验证下列签名”问题

    树莓派 装机后的必要操作 - 添加软件源 解决 添加公钥 时会遇到的问题 当你添加完Debian的软件源后,在终端中执行sudo apt-get update时,会出现下面的错误:(这里我添加了3个软 ...

  10. 如何将maven项目打包成可执行的jar

    如何将maven项目打包成可执行的jar 分类: maven2010-12-17 10:18 10411人阅读 评论(2) 收藏 举报 jarmavenassemblyjava 方法一:将项目及所依赖 ...