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()函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）
原文始发于微信公众号（胖蔡话前端）：CSS中如何使用calc()函数
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223026.html
