胖蔡说技术
随便扯扯

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)为单位的时间的值。如:animationtransition
  • <percentage>:CSS中属性值需要设置百分比的。如: widthheightmarginpadding
  • <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() 函数全当成普通的括号。(译者注:所以,函数内直接用括号就好了。)
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » CSS中如何使用calc()函数
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏