今天做练习的时候遇到了这样一行代码：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()函数时需要注意以下几点：
- calc()函数用于动态计算长度值。
- calc()函数支持 “+”, “-”, “*”, “/” 运算，运算符前后都需要保留一个空格。
- 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() | 插入自定义的属性值。 |