html中calc属性什么意思,CSS3中新属性calc()的详细介绍

一、前言

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

二、使用方法

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

width: calc(15px + 15px);//30px

width: calc(15px - 10px);//5px

width: calc(15px*2);//30px

width: calc(15px/3);//5px}

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

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

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

三、calc()嵌套

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

--widthA: calc(10px + 190px);

--widthB: calc(var(--widthA) / 2);

--widthC: calc(var(--widthB) / 2);

width: var(--widthC);//50px

}

四、简单的居中

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

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为计算公式}

html中calc属性什么意思,CSS3中新属性calc()的详细介绍相关推荐

html中box标签的作用,CSS3的box-sizing属性的作用及使用
先用大白话通俗说一下,先给div设置宽高为200px,这是在加上padding:10px; , 此时div宽高加上padding值后实际宽高变成了220px(等于上下左右各加了10px的padding ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
常用的css3的新属性
2019独角兽企业重金招聘Python工程师标准>>> 作为前端开发人员,如果你还不知道或还没有接触过CSS3,那么你真的OUT了!就像蒸汽机的发明标志工业革命的开始一 ...
python中装饰器的作用_Python装饰器详解，详细介绍它的应用场景
装饰器的应用场景附加功能数据的清理或添加:函数参数类型验证 @require_ints 类似请求前拦截数据格式转换将函数返回字典改为 JSON/YAML 类似响应后篡改为函数提供额外的数据 moc ...
Css3系列-新属性新布局
为什么80%的码农都做不了架构师?>>> 大家可以下载我上传的css分析和实例展示,结合使用! 地址:http://www.oschina.net/code/snippet_2 ...
python中easygui有几种_一、Python 模块EasyGui详细介绍
Python 模块EasyGui详细介绍 EasyGui 官网: -http://easygui.sourceforge.net 官方的教学文档: -easygui-docs-0.96\tutoria ...
html5新标签和css3的新属性
html5新特性较为常用的有:<artical></artical>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,总之久是可以连接外部类似文章的东西.< ...
怎么从计算机中往打印机传,打印机怎么传真打印机传方法【详细介绍】
打印机大家应该知道吧!这是设备这几年非常地流行,当然了这也是社会不断发展的结果.打印机其实非常地实用,这一点步入职场的功能人士体会会更加深刻一点儿.自从有了打印机人们的工作效率提高了不少,现在的打印机 ...
使用t-sql语句修改表中的某些数据及数据类型。_数据库基本理论详细介绍
1.数据库范式第一范式:列不可分,eg:[联系人](姓名,性别,电话),一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF: 第二范式:有主键,保证完全依赖.eg:订单明细表[Or ...
计算机中递归的概念,递归是什么？关于递归的详细介绍
递归,又译为递回,在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当两面镜子相互之间近似平行时,镜中嵌套的图像是以无限递归的形式出现 ...

html中calc属性什么意思,CSS3中新属性calc()的详细介绍

html中calc属性什么意思,CSS3中新属性calc()的详细介绍相关推荐

最新文章

热门文章