CSS中如何使用calc()函数

css中提供calc()函数来辅助我们进行属性值的计算，这也是我们开发过程中使用频率较大的一个CSS函数，一般的适用于丈量类属性值的计算。其具体使用场景主要分为如下几个种类：

• <length>：长度类型用于尺寸的属性值，常见如：width、margin、padding、font-size、border-width、text-shadow。
• <angle>：CSS用于表示角度的大小，单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）。在 gradient相关函数内参数中可以使用calc进行计算角度等大小和 transform 的某些方法等场景中有所应用。
• <time>：表达了以秒（s）或毫秒（ms）为单位的时间的值。如：animation、transition。
• <percentage>：CSS中属性值需要设置百分比的。如： width, height, margin, padding。
• <integer>：CSS整型数值，如：column-count、counter-increment、grid-column、grid-row、z-index。

浏览器兼容性

使用

calc()使用方法比较简单，使用格式如：property:calc(expression)支持基础的+,-,*，/等计算方法。

width: calc(100vw - 180px);

注意事项

• 运算符之间需要使用空白字符来隔离，否则会被解析成一个无效的表达式。
• 如上当计算大小的时候需要带单位，如：%、vw、vh、px、em、rem等。
• 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）