calc()

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合:<length><frequency>, <angle><time><percentage><number>、或 <integer>

语法

/* property: calc(expression) */
width: calc(100% - 80px);

此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。

+
加法。
-
减法。
*
乘法,乘数中至少有一个是 <number>
/
除法,除数(/ 右面的数)必须是 <number>

表达式中的运算对象可以使用任意 <length> 值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。

备注

  • +- 运算符的两边必须要有空白字符。比如,calc(50% -8px) 会被解析成为一个无效的表达式,解析结果是:一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为:一个长度 后跟一个加号 再跟一个负百分比。
  • */ 这两个运算符前后不需要空白字符,但如果考虑到统一性,仍然推荐加上空白符。
  • 用 0 作除数会使 HTML 解析器抛出异常。
  • 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式,auto 可视为已指定。
  • calc() 函数支持嵌套,但支持的方式是:把被嵌套的 calc() 函数全当成普通的括号。(译者注:所以,函数内直接用括号就好了。)

形式化语法

calc( <calc-sum> )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

例子

使用指定的外边距定位一个对象

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中,使用 CSS 创建了一个横跨整个窗口的 banner,该 banner 左右两边各有一个距离窗口边缘 40 像素的间距:

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
<div class="banner">This is a banner!</div>

自动调整表单域的大小以适应其容器的大小

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。

看一下下面的CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

这个例子中,form 元素自身使用了窗口可用宽度的 1/6,然后,为了让 form 元素内部的 input 元素保持合适的大小,我们再一次使用了 calc(),让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

使用 CSS 变量嵌套使用 calc()

我们来看一下下面的代码:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的变量都被展开后,widthC 的值就会变成 calc( calc( 100px / 2) / 2),然后,当它被赋值给 .foo 的 width 属性时,所有内部的这些 calc()(无论嵌套的有多深)都将会直接被扁平化为一个括号(原文:be flattened to just parentheses),所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了,或者说就变成 25px 了。 简而言之:一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

无障碍相关考量

calc() 被用于控制文本的长度时,确保值中包含一个相对长度单位,例如:

h1 {
  font-size: calc(1.5rem + 3vw);
}

这可以保证文本的大小会跟随页面一同缩放。

规范

规范 状态 备注
CSS Values and Units Module Level 3
calc()
Candidate Recommendation 初步定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<calc()>Chrome Full support 26
Full support 26
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9Opera Full support 15Safari Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 28Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57 calc(1*2*3) is not parsed successfully.
Notes Firefox 57 increased the number of places calc() could substitute another value. See bug 1350857.
No support 4 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 14Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 1.5
<color> value supportChrome No support NoEdge No support NoFirefox Full support 59IE No support NoOpera No support NoSafari Full support 6WebView Android No support NoChrome Android No support NoFirefox Android Full support 59Opera Android No support NoSafari iOS Full support 6Samsung Internet Android No support No
Gradient color stops supportChrome Full support 19Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 15Safari Full support 6WebView Android Full support 37Chrome Android Full support 28Firefox Android Full support 19Opera Android Full support 15Safari iOS Full support 6Samsung Internet Android Full support 1.5
Nested calc() supportChrome Full support 51Edge Full support 16Firefox Full support 48IE No support NoOpera Full support 38Safari Full support 11WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 48Opera Android Full support 41Safari iOS Full support 11Samsung Internet Android Full support 5.0
<number> value supportChrome Full support 31Edge Full support 12Firefox Full support 48IE Full support 9Opera Full support 18Safari Full support 6WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 48Opera Android Full support 18Safari iOS Full support 6Samsung Internet Android Full support 2.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

也可以看看