css中的calc动态计算长度值

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);