CSS3 的 calc()函数(为元素设置动态的属性值)

一、定义与用法: (定义这个东西都是大同小异的,我这里是取自菜鸟教程)

calc是英文单词calculate(计算)的缩写,是CSS3新增的功能,用来指定元素的长度。比如说:你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值,为何说是动态值呢?因为是我们使用表达式计算得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

语法:calc(expression); //expression:必须,一个数学表达式,结果将采用运算后的返回值。

div{
	width : calc(100% - 100px);
}

注:

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100% - 100px);
  • 任何长度值都可以使用 calc() 函数进行计算。
  • calc() 函数支持 " + " 、" - " 、" * " 、" / " 运算。
  • calc() 函数使用标准的数学运算优先级规则。

calc()函数也可以嵌套使用:(函数可以嵌套。在函数里边,会被视为简单的括号表达式,如下例所示。)

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

浏览器的兼容性:
说一下 calc() 函数在各大浏览器的兼容性,在IE9+、FF4.0+、Chrome19+、Safari6+ 都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。(以后的版本请看官网的信息,相信后续一定会支持的)

//大家在实际使用时,同样需要添加浏览器的前缀
 .elm {
	/*Firefox : 火狐浏览器*/
	-moz-calc(expression);
	/*chrome:谷歌浏览器 safari:苹果内部浏览器*/
	-webkit-calc(expression);
	/*Standard:标准浏览器通用 */
	calc();
 }

二:深入了解calc()函数:(简单的例子)
其实,通过上面的定义给我一种这个函数虽然知道怎么用,但是具体是用到什么地方怎么用还是不是特别清楚,好,那么我们先举个例子:

1、首先我们在body中先定义两个div,然后看一下不使用calc()函数的情况:

<div id="outer">
	<div id="inner">div>
div>

然后添加一些基本的宽和高,方便看效果再添加一个背景颜色,我们在外部设置了具体的宽,然后设置了内部的width为100%,这样如果内部超出了盒子模型,我们就能一眼看到。

#outer{
	width: 400px;
	background-color: red;	
}
#inner{
	width: 100%;
	background-color: yellow;
	height: 100px;
}

看一下效果:
CSS3 的 calc()函数(为元素设置动态的属性值)_第1张图片
2、因为我们要证明在width为100%的情况下添加padding和border会撑破盒子模型,所以我们为内部的div添加padding和border。

#inner{
	width: 100%;
	background-color: yellow;
	height: 100px;
	padding: 10px;
 	border: 5px solid green;
}

看一下效果:
CSS3 的 calc()函数(为元素设置动态的属性值)_第2张图片
其实我们这里肉眼看也能看到其实长了一部分了,但是为了更好的看出效果,我们为外部添加上下的内边距。

#outer{
	width: 400px;
	background-color: red;	
	padding: 3px 0;
}

看一下效果:
CSS3 的 calc()函数(为元素设置动态的属性值)_第3张图片
很明显,因为外部div宽为固定的,所以我们看到由于内部加了border和padding,所以内部div已经撑破了盒子模型,即外部div的width已经超出了我们设置的固定的 400 而是 width + padding * 2 + border * 2 (400+10 * 2+5 * 2)的值。
CSS3 的 calc()函数(为元素设置动态的属性值)_第4张图片
3、下面我们使用calc()函数来避免这个问题:

分析:
为了解决这个问题,我们之前都是计算一下里面div的width进行设置,我们这个例子中我们是设置的外面的div为400px,当然可以计算完直接设置,但是如果我们的页面是自适应布局,需要适配不同的屏幕,那样鬼知道用户使用多宽的屏幕打开的我们的页面,那么我们只能通过减小内部div的width为90%或更小来实现了,但是随着CSS3的出现,我们可以是使用box-sizing(后面我会写一篇文章来总觉这个特性)来改变元素的盒子模型类型实现想要的效果,但是使用calc()函数将会使实现更加简单。

实现:
我们知道内部div的width是外部div的width+两边的border+两边的padding,那么我们减去border和padding就可以和外部div的宽相同了,从而实现不撑破盒子模型了。

#inner{
	background-color: yellow;
	height: 100px;
	padding: 10px;
 	border: 5px solid green;
 	width: calc(100% - 10px*2 - 5px*2);
 	//上面说过的兼容其他的浏览器要加上前缀,忘了赶紧去上面再看看
 	width:-moz-calc(100% - 10px*2 - 5px*2);
	width:-webkit-calc(100% - 10px*2 - 5px*2);
	//对于不支持 calc() 的浏览器,整个属性值表达式将被忽略。
	//不过我们可以对那些不支持 calc()的浏览器,使用一个固定值作为回退。
	width:90%; /* Fallback for older browsers */
}

最后看一下效果:(已经实现了)
CSS3 的 calc()函数(为元素设置动态的属性值)_第5张图片
三:深入了解calc()函数:(自适应布局的例子)

这个例子是网上找到的,我就不自己再做一个例子了(换一个例子无非也就是改改值而已,其实效果都一样),但是网上也没给提供 html 代码和 效果展示,我自己再做一下,给大家展示一下效果,方便大家理解:

首先说一下布局思路:
布局中使用自适应布局(也就是大家使用不同的设备打开的效果都一样),整体布局:上下布局包含 " " 、" 内容 " 、" "三部分,左右布局包括主 " 内容 " 和 " 边栏 ",主内容靠左,边栏靠右,好下面看代码:

HTML代码:(内容自己随便加)

<body>
	
	<div class="wrapper">
		
		<div id="header">div>
		
		<div id="main">div>
		
		<div id="accessory">div>
		
		<div id="footer">div>
	div>
body>

首先给 body 添加 背景颜色(background ) 和 字体颜色(color) 以及 20px的 内边距(padding);

body {
    background: #E8EADD;
    color: #3C323A;
    padding: 20px; 
}

再为 头部 添加 样式:添加自适应的width 和 内边距padding;

#header {
   background: #f60;
   padding: 20px;
   width: 984px;/*Fallback for browsers that don't support the calc() function*/
   width: -moz-calc(100% - 40px);
   width: -webkit-calc(100% - 40px);
   width: calc(100% - 40px);
}

再为 主内容 添加样式:主内容左浮动 以及 自适应的 width;

#main {
    border: 8px solid #B8C172;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 20px;
    width: 704px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(75% - 20px * 2 - 8px * 2);
    width: -webkit-calc(75% - 20px * 2 - 8px * 2);
    width: calc(75% - 20px * 2 - 8px * 2); 
}

右边栏 添加样式:右边框 右浮动 以及 自适应的width;

#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}

脚部 添加样式:添加 自适应的width 和 内边距padding;

#footer {
    clear:both;
    background: #000;
    padding: 20px;
    color: #fff;
    width: 984px;/* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}

最后看一下展示效果:
CSS3 的 calc()函数(为元素设置动态的属性值)_第6张图片
我们随便添加一些内容再看看:
CSS3 的 calc()函数(为元素设置动态的属性值)_第7张图片
四:更多的使用场景:

1、居中元素:参考链接
我们在正常情况下如果想让 body 中的一个元素居中,那么我们可以设置让该 div 相对定位,然后设置 top:50%,left:50%

// Assuming .foo is 300px height and 300px width
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

但是如果我们使用clac()函数,那么会大大简化我们的代码:(前提是该元素要相对定位,所以要看使用场景)

.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

2、 创建根栅格尺寸:(左上角标签部分不动,其他部分进行自适应缩放)
使用 remcalc()函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。

html {  
    font-size: calc(100vw / 30);
}

现在,1rem 为视口宽度的 1/30。在页面上的任何文本,将会根据你的视口自动缩放。更进一步,相同比例的视口总会显示相同的文本数量,不管视口的真实尺寸是多少。

3、表示更加清晰:
calc()使计算更加清晰。如果你使一组项目为它们父元素容器宽度的 1/6,你可能这么写:

.foo {
    width: 16.666666667%;
}

然而,它能够更加清晰并具有可读性:

.foo {
    width: calc(100% / 6);
}


使用 calc(),我们还能做更多的事情,比如 创建一个栅格系统。它是 CSS 最有用的新特性之一。

好,到这里就结束了,上面就是有关calc()函数的相关内容,网上的东西真的是千篇一律,网上虽然有的有例子但是都是不够详细,不适合小白来看,我就整理了一篇顺便给自己复习一下,也希望能够帮助到大家共同进步,如果喜欢请点个赞吧,谢谢!

你可能感兴趣的:(CSS)