CSS3基础强大又实用的CSS运算函数calc的初级用法

强大又实用的CSS运算函数calc的初级用法

在CSS3中可以通过calc()这个函数进行四则运算,本文主要分享关于该运算函数的用法,这里calc是calculate这个词的缩写,是“计算”的意思,例如在Windows系统中运行calc.exe即可打开系统自带的计算器程序。

运算函数calc()的用法很简单,就是将加减乘除的数学算式写在括号里即可,这里支持CSS里的各种单位的混合运算,下面先做个简单的示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
div {margin:10px;font-size:20px;}
.a1 {
 width:calc(100px + 100px);
 height:calc(2em*2);
 background:#2b6;
}
.a2 {
 width:calc(200px/2);
 height:calc(50px + 1em);
 background:#f87;
}
.a3 {
 width:calc(100%/5);
 height:calc(10rem - 100px);
 background:#387;
}
.a4 {
 width:calc(100% - (550px + 550px));
 height:calc(1em + 0.5rem*2);
 background:#47e;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</body>
</html>

这里有4个div,分别使用calc函数为它们设置了宽和高,a1设置的是简单的运算,比如两个100px相加,肯定是200px,所以a1的宽就是200px,由于设置了字号大小为20px。所以2em就是40px,2em*2也就是80px,所以a2的高为80px,所以此时a1元素显示的尺寸为:

CSS-calc运算函数.png

这里给a1设置了宽为200px/2,也就是100px,高为50px和1em相加,也就是50px加上20px,等于70px,所以a2显示的尺寸为:

CSS-calc运算函数2.png

这里给a3设置了宽为100%/5,也就是总宽度的1/5,我这里屏幕总宽度为1366px,所以a3宽度大概是1366px/5=273.2px,1rem=16px,所以10rem减去100px相当于60px,所以a3显示的尺寸为:

CSS-calc运算函数3.png

这里给a4设置了宽为100%减去两个550px,也就相当于1366px减去1100px,也就是266px,高为1em和两个0.5rem相加,也就是16px加上20px,也就是36px,所以a4显示的尺寸为:

CSS-calc运算函数4.png

从这些运算方式可以看出,多种单位之间可以混合运算,这对于网页布局来说是非常便利实用的功能,请注意,这里涉及到加减运算的时候,需要在加号和减号的两边都加上空格,否则运算不会生效。在calc函数中的运算严格遵守数学运算中先乘除后加减,有括号的时候先算括号里的运算规则。

使用calc函数可以解决采用百分比定义元素宽度时的尴尬局面,比如手机版的网页,一般设置页面总宽度为100%,但此时如果想给页面左右加上1px的边框,由于CSS中计算元素尺寸会将边框也算在内,所以此时必须定义box-siziing属性,否则总宽度就会超过100%,这种情况下,如果使用calc函数来定义宽度就会更灵活了,例如:

width:calc(100% - 2px)

这样就轻松直观的定义了满屏的宽度,同时又给左右各留下了1px的空间。

有了calc函数,很多需要计算的情况就可以交给它来完成,比如有时候在网页设计中会遇到不确定宽度元素的居中,可能会这么做:

div {width:90px;height:60px;position:relative;left:50%;margin-left:-45px;}

现在通过calc函数就不需要再写一个margin负边距了:

div {width:90px;height:60px;position:relative;left:calc(50% - 45px);}

有些图片类的网站是以缩略图的方式展示内容,比如每行6张缩略图的布局可以这样做:

ul li {
 width:calc(100%/6 - 10px);
 float:left;
 margin:5px;
}

在网页设计中有时候会遇到三等分的情况,而CSS里又不支持1/3这样的分数写法,如果写成33.3%这样的近似值始终不精确,自从有了calc函数,只需使用calc(100%/3)就可以了,例如荷兰国旗就是由朱红色、白色和钴蓝色的三个横条组成的,如果使用CSS绘制,则可以这样做:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
body {background-color:#eee;}
.holand {
 width:300px;height:200px;
 background:linear-gradient(#a12 calc(100%/3),
   #fff calc(100%/3),
   #fff calc(100%/3*2),
   #248 calc(100%/3*2),
   #248);
}
</style>
</head>
<body>
<div class="holand"></div>
</body>
</html>

这样,一个标准的荷兰国旗图案就做好了,这三个横条的高度是绝对相等的:

CSS荷兰国旗.png

既然用到渐变,其实颜色值也可以用到calc函数,比如在《CSS3径向渐变》文中曾经做过一个七色彩虹,里面的七个颜色值看的让人眼花,如果像下面这样写会不会清楚一些呢?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
.rainbow {
 width:500px;
 height:300px;
 background-color:#000;
 background-image:radial-gradient(ellipse 380px 320px at center 310px,
 #000 10%,
 hsl(calc(60*5),100%,50%) 20%,
 hsl(calc(60*4),100%,50%) 30%,
 hsl(calc(60*3),100%,50%) 40%,
 hsl(calc(60*2),100%,50%) 50%,
 hsl(calc(60*1),100%,50%) 60%,
 hsl(calc(60*0.5),100%,50%) 70%,
 hsl(calc(60*0),100%,50%) 80%,
 #000 85%);
}
</style>
</head>
<body>
<div id="all">
 <div class="rainbow"></div>
</div>
</body>
</html>

关于CSS3的calc函数初级知识就介绍到这里,一个强大而灵活的功能,你会拿它来做什么呢?

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/150.html