css3-calc用法
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用法的更多相关文章
- css3 calc()的用法
转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...
- css3 calc():css简单的数学运算-加减乘除
css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...
- css3 calc()
概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...
- CSS3 calc()函数使用
1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...
- border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...
- calc 用法以及原理
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. 它是CSS预处理器 .foo { width: 100 ...
- CSS3 calc()的使用
前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...
- css3 calc()方法详解
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- CSS3 calc() 会计算的属性
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...
- 三栏布局之 css3 calc和 flex
圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...
随机推荐
- Vbat 1.8V,接充電器,GPIO_CHG_EN pin 竟然是 high!
Schematic : Precondition : Vbat 1.8V Plugin adapter Preloader doesn't enable GPIO_CHG_EN Origin : 做個 ...
- FileReader与FileWriter
分别继承于InputStreamReader OutputStreamWriter 所以: FileReader:new FileReader(“d:/back/string.txt”) = ...
- LeetCode OJ--Insert Interval **
https://oj.leetcode.com/problems/insert-interval/ 给出有序的区间来,再插入进去一个,也就是区间合并. 刚开始确立了几个思路,看要插入的区间的start ...
- WCF的学习之旅
一.WCF的简单介绍 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是MS为SOA (S ...
- SourceTree免注册并连码云
1 在C:\Users\用户\AppData\Local\Atlassian\SourceTree目录下新建 accounts.json 其中AppData是隐藏文件夹 2 输入 [ { " ...
- 作为程序员,再也不想和PM干架了
上周,又看见有程序和PM(产品经理)吵了起来,大致是因为晚上就要上线了,下午的时候PM来说要改点需求,但程序不愿意.兴许是天气热了,大家都很烦躁,于是一言不合就发飙了,最终还是程序老大介入才解决了问题 ...
- luogu P2746 [USACO5.3]校园网Network of Schools
题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...
- PHP微信公众平台OAuth2.0网页授权,获取用户信息代码类封装demo(二)
一.这个文件微信授权使用的是OAuth2.0授权的方式.主要有以下简略步骤: 第一步:判断有没有code,有code去第三步,没有code去第二步 第二步:用户同意授权,获取code 第三步:通过co ...
- Java基础教程:tutorialspoint-junit
教程: 来自turorialspoint的JUnit教程(英文),官网:https://www.tutorialspoint.com/junit/index.htm 中文版本:http://wiki. ...
- DELPHI是怎么实现跨平台的?
DELPHI是怎么实现跨平台的? 首先跨平台必须要兼容原来的语法,以线程的临界区对象为例: TCriticalSection = class(TSynchroObject){$IFDEF POSIX} ...