calc()

语法：

calc() = calc(四则运算)

说明：

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

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-8 12+ 2-3.6 4-18 3.1-5.1 9-12.1 3.2-5.1 2.1-4.3 7 10-12.1 61 56 10+ 11.4 4+ 1.2 7.12
9 #2 4-15 -moz- 19-25 -webkit- 6 -webkit- 15+ 6.0-6.1 -webkit- 4.4-4.4.4 #1 10 37
10+ 16+ 26+ 6.1+ 7.0+
  1. 部分版本在使用calc()时，乘法和除法可能无效；
  2. 当在 background-position中使用calc()时将会导致浏览器崩溃；

示例：