CSS3 calc() 函数，height: calc(100% - 70px)；

今天做练习的时候遇到了这样一行代码：height: calc(100% - 70px);，100%的高度减去70px？？？这是什么函数？竟然支持不同单位之间的运算？！

通过查阅资料，我终于认识了这个函数——calc()函数。

calc()函数是CSS3 提出的，目的是动态改变宽度/高度的变化，适配问题。

<div>
	<div class=“head”>标题</div>
	<div class=“contain”>内容</div>
</div>
<style>
	.head{
		height: 70px;
	}
	.contain{
		height: calc(100% - 170px);;
	}
</style>

对于以上代码，如果我们要让盒子中的“内容”占满“标题”以下的所有区域，可以给“标题”设置一个固定值（70px），然后让“内容”的高为100%减去“标题”的高度，只需要设置样式使用calc() 函数就可以了！

使用calc()函数时需要注意以下几点：

1. calc()函数用于动态计算长度值。
2. calc()函数支持 “+”, “-”, “*”, “/” 运算，运算符前后都需要保留一个空格。
3. calc()函数使用标准的数学运算优先级规则。

既然说到了CSS，那就总结一下CSS中几个常用的函数吧~

函数	描述
attr()	返回选择元素的属性值。
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。
hsl()	使用色相、饱和度、亮度来定义颜色。
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。
linear-gradient()	创建一个线性渐变的图像
radial-gradient()	用径向渐变创建图像。
repeating-linear-gradient()	用重复的线性渐变创建图像。
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。
rgb(a,b,c)	使用a,b,c三个颜色的叠加来生成各式各样的颜色。
rgba(a,b,c,n)	使用a,b,c三个颜色以及透明度的叠加来生成各式各样的颜色。
var()	插入自定义的属性值。