calc()

  • 版本:CSS3
wechat
WEB前端开发官方公众号
10年服务3000万前端开发工程师

微信号:webfedev

微信扫一扫关注,每天分享前端干货

语法:

calc() = calc(四则运算)

说明:

用于动态计算长度值。
  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 "+", "-", "*", "/" 运算;
  • calc()函数使用标准的数学运算优先级规则;

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0-3.6 4.0-18.0 3.1-5.1 15.0+ 3.2-5.1 2.1-4.3 18.0
9.0+ 4.0-15.0
-moz-
19.0-25.0
-webkit-
6.0
-webkit-
6.0-6.1
-webkit-
4.4-4.4.4 19.0-25.0
-webkit-
16.0+ 26.0+ 6.1+ 7.0+ 26.0+

示例: