calc

概述

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

语法

/* property: calc(expression) */
width: calc(100% - 80px);
此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
+
加法
-
减法
*
乘法,乘数中至少要有一个是 <number> 类型的
/
除法,除数(/右面的数)必须是 <number> 类型的

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

注:用 0 作除数会让 HTML 解析器抛出异常.
注:+ 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。

* 和 / 运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符。

注: 涉及自动和固定布局表中的表列,表列组,表行,表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

正式语法

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;
/* fallback for browsers which still doesn't support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}
<div class="banner">This is a banner!</div>

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

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

看一下下面的CSS:

input {
  padding: 2px;
  display: block;
  width:  98%; 
/* fallback for browsers without support for calc() */
  width:  calc(100% - 1em);  
}

#formbox {
  width:  130px; 
/* fallback for browsers without support for calc() */
  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 ? Safari 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 ? Safari 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
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

也可以看看