calc()的使用

之前对于calc()接触的很少，也很少用，但是真正接触之后发现，这个用处还不小。
定义与用法
1.calc() 函数用于动态计算长度值。
2.需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
3.任何长度值都可以使用calc()函数进行计算；
4.calc()函数支持 “+”, “-”, “*”, “/” 运算；
5.calc()函数使用标准的数学运算优先级规则；

1.calc() 函数用于动态计算长度值。
通常用calc()来指定元素的长度，可以是width、height、border还是padding等。说白了，calc()就是css3的一个指定元素长度的属性，它的特殊之处在于它可以做计算，而且支持混合使用各种单位，比如%、px、em等。所以这个属性特别适用于那些自适应的布局。

.content {
    min-height: calc(100vh - 128px);
}
.item {
    width: calc(100% - 28px);
}

兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持。

2.需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
特别声明：表达式中有“+”，“-”运算符的，前后必须要有空格，例如 “width:calc(100% - 20px)”这种写法；而对于“*”，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。

3.任何长度值都可以使用calc()函数进行计算；
通常用calc()来指定元素的长度，可以是width、height、border还是padding等。

4.calc()函数支持 “+”, “-”, “*”, “/” 运算；
特别声明：表达式中有“+”，“-”运算符的，前后必须要有空格，例如 “width:calc(100% - 20px)”这种写法；而对于*，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。

5.calc()函数使用标准的数学运算优先级规则；