作用：
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元素水平垂直居中
