1 场景
css的样式中，存在动态计算长度的需求。
2 方案
使用css中的calc函数动态计算css中的长度值。
语法：
calc(expression)
参数说明：
值
描述
expression
必须，一个数学表达式，结果将采用运算后的返回值。
3 使用
如需将元素设置为父容器的中间，元素大小为200px;100px;
传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：
.context{
position: absolute;
height: 100px;
width: 200px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
通过calc属性，可以很方便实现此功能：
.context{
position: absolute;
height: 100px;
width: 200px;
top: calc(50% - 50px);
left: calc(50% - 100px);
}
通过calc(50% - 50px)，计算出了父容器宽度减去本身容器高度一半后的距离。
4 说明
4.1 注意事项
(1)运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)
(2)任何长度值都可以使用calc()函数进行计算(如高度、padding值、marging值、文字大小、top值等)
(3)calc()函数支持 "+", "-", "*", "/" 运算
(4)calc()函数使用标准的数学运算优先级规则
(5)对不支持calc()的浏览器，整个属性值表达式将被忽略，可以使用固定值作为降级方案
.myDiv{
width: 90%;
width: calc(100% - 100px)
}
(6)calc运算公式中，可以混合使用各种单位进行计算：width: calc(100% - 10px)
(7)calc可以嵌套计算
4.2 兼容浏览器
chrome
火狐
IE
26.0 19.0 -webkit-
16.0 4.0 -moz-
9.0
4.3 应用
(1)相对定位
常用弹窗插件layer，可以通过内置属性offset自定义弹窗的位置。
offset属性，可以通过如下配置，定义top、left的坐标。
offset: ['100px', '50px']
如想设置弹窗位置：在屏幕最右侧，中部的位置，因浏览器大小不一样，无法通过top、left坐标直接指定。
可以通过calc()函数计算得到相应位置：
offset: [calc(100% - 100px), '350px']
(2)实时宽度计算
栅格宽度的计算
(3)字体大小计算
如设置字体大小，根据屏幕尺寸编码：
font-size: calc(100vw / 50);