calc()

语法：

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 #1 4.0-15.0
-moz-		 19.0-25.0
-webkit-		 6.0
-webkit-		 6.0-6.1
-webkit-		 4.4-4.4.4 #2 19.0-25.0
-webkit-
10.0+ 16.0+ 26.0+ 6.1+ 7.0+ 26.0+
  1. 当在 background-position中使用calc()时将会导致浏览器崩溃；
  2. 部分版本在使用calc()时，乘法和除法可能无效；

示例：