CSS当中数学表达式calc

数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容

定义

数学表达式calc()是calculate计算的缩写,它允许使用+、-、*、/这四种运算符,可以混合使用%、px、em、rem等单位进行计算

兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持,android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position

注意:+和-运算符两边一定要有空白符

<style>
.test1{
border: calc( 1px + 1px ) solid black;
/* calc里面的运算遵循*、/优先于+、-的顺序 */
width: calc(100%/3 - 2*1em - 2*1px);
background-color: pink;
font-style: toggle(italic, normal);
}
.test2{
/* 由于运算符+的左右两侧没有空白符,所以失效 */
border: calc(1px+1px) solid black;
/* 对于,不能小于0的属性值,当运算结果小于0时,按0处理 */
width: calc(10px - 20px);
padding-left: 10px;
background-color: lightblue;
}
</style>
<div class="test1">测试文字一</div>
<div class="test2">测试文字二</div>

CSS当中数学表达式calc的更多相关文章

  1. 理解CSS中的数学表达式calc()

    前面的话 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容 定义 数学表达式calc()是calculat ...

  2. css中的数学表达式calc()

    前言 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念 数学表达式calc()是calculate计算的缩写,它允许使用+.-.*. ...

  3. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  4. css的新特性 calc () 使用

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

  5. 原来css也可以计算-calc()使用

    在浏览其他人的源代码时,看到了一个陌生的属性:width:calc(100% - 10px -10px); 出于好奇心,百度了一下,看到了以下这篇文章,http://www.w3cplus.com/c ...

  6. CSS3表达式calc( )

    CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...

  7. CSS当中color的四种表示方法

    这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...

  8. Qt计算器开发(二):信号槽实现数学表达式合法性检查

    表达式的合法性 由于我们的计算器不是单步计算的,所以我们能够一次性输入一个长表达式.然而假设用户输入的长表达式不合法的话,那么就会引发灾难.所以有必要对于用户的输入做一个限制. 一些限制举例: 比方, ...

  9. NEST 中的日期数学表达式

    Date math expressions Version: 5.x 英文原文地址:Date math expressions query/filter 中涉及到日期类型时(如:timeout 参数) ...

随机推荐

  1. Linux 环境 Intelij Idea 安装与快捷图标配置

    索引: 目录索引 参看代码 GitHub: intelij-idea.txt 一.Linux (DeepinOS) 环境 1.官网下载 ideaIU-.tar.gz 2.解压 .tar.gz -C ~ ...

  2. 使用 Dashboard - 每天5分钟玩转 Docker 容器技术(174)

    上一节我们完成了 Kubernetes Dashboard 的安装,本节就来实践一下. Dashboard 界面结构 Dashboard 的界面很简洁,分为三个大的区域. 顶部操作区在这里用户可以搜索 ...

  3. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  4. c/c++ 网络编程 UDP 发送端 bind 作用

    网络编程 UDP 发送端 bind 作用 upd 发送端 调用bind函数的效果:把socket特定到一个指定的端口,如果不调用bind,内核会随机分配一个端口. upd 发送端 调用bind函数的目 ...

  5. 如何设置Oracle数据库客户端字符集以及系统中的NLS_LANG环境变量

    概述: 本地化是系统或软件运行的语言和文化环境.设置NLS_LANG环境参数是规定Oracle数据库软件本地化行为最简单的方式. NLS_LANG参数不但指定了客户端应用程序和Oracle数据库所使用 ...

  6. windows下php7.1安装redis扩展以及redis测试使用全过程

    最近做项目,需要用到redis相关知识.在Linux下,redis扩展安装起来很容易,但windows下还是会出问题的.因此,特此记下自己实践安装的整个过程,以方便后来人. 一,php中redis扩展 ...

  7. WMware workstation中几种网络连接的说明 【转】

    博客来源:WMware workstation中几种网络连接的说明 VMware workstation中几种网络连接的说明 WMware workstation中网络连接包括,桥接模式.NAT模式. ...

  8. 设置TextBlock默认样式后,其他控件的Text相关属性设置失效问题

    问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...

  9. 线程池工厂方法newFixedThreadPool()和newCachedThreadPool()

    newFixedThreadPool()方法: 该方法返回一个固定数量的线程池,当一个新的任务提交时,线程池中若有空闲线程,则立即执行. 若没有.则新的任务被暂存在一个任务队列中,待线程空闲时,便处理 ...

  10. Spark1.6之后为何使用Netty通信框架替代Akka

    解决方案: 一直以来,基于Akka实现的RPC通信框架是Spark引以为豪的主要特性,也是与Hadoop等分布式计算框架对比过程中一大亮点. 但是时代和技术都在演化,从Spark1.3.1版本开始,为 ...