作用：
calc() 函数用于动态计算长度值
其实，calc()这个形式看起来就很容易让人想到Javascript里的函数，当然他不是js里的函数，但是他有着类似函数的功能，可以用来计算，括号里是一个表达式，通常用calc()来指定元素的长度，不管是width、height、border还是padding等都可以用他来指定。说白了，calc()就是css3的一个指定元素长度的属性，他的特殊之处在于他可以做计算，而且支持混合使用各种单位，比如%、px、em等。所以这个属性特别适用于那些自适应的布局。
用法 (注意)：
1、运算符表达式中有“+”，“-”运算符的，前后必须要有空格。例如：width: calc(100% - 10px)；
2、任何长度值都可以使用calc()函数进行计算；
3、calc()函数支持 “+”, “-”, “*”, “/” 运算；
3、calc()函数使用标准的数学运算优先级规则；
实例
例子1：实现居中问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="parent"> <div class="center"></div> </div> <style> .parent{ width: 200px; height: 200px; background: #f5f5f5; position: relative; } .center{ width: 60px; height: 60px; position: absolute; top:calc(50% - 30px); left:calc(50% - 30px); background: pink; } </style> </body> </html>
效果展示：
children元素定位的位置页可以由calc的值进行控制，children元素水平垂直居中
