概述
CSS函数calc()
可以用在任何一个需要<length>
、<frequency>
, <angle>
、<time>
、<number>
、或<integer>
的地方。有了calc(),
你就可以通过计算来决定一个CSS属性的值了。
你还可以在一个 calc() 内部嵌套另一个
calc() ,里面的 calc() 会被简单地视为加了括号。
语法
/* property: calc(expression) */ width: calc(100% - 80px);
值
- expression
- 一个数学表达式,该表达式的结果会作为最终的值。
表达式
该表达式可以使用以下运算符任意组合(使用正常的运算符优先级顺序)。
表达式中的操作数可以使用任意语法种类的长度。如果你愿意,你可以在一个表达式中混用多种不同的长度单位。在需要时,你还可以使用小括号来调整计算顺序。
+ 和
- 运算符的两边必须始终要有空白符。
比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。
而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
* 和
/ 运算符不需要空白符,
但考虑到统一性,仍然推荐加上空白符。auto
had been specified.正式语法
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()
就仅仅相当于是一个括号。
规范
规范 | 状态 | 注释 |
---|---|---|
CSS Values and Units Module Level 3 calc() |
Candidate Recommendation | Initial definition |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 19 -webkit 26 |
4.0 (2) -moz 16 (16) |
9 | ? | 6 -webkit[1] 7 |
On gradients' color stops | 19 -webkit 26 |
19 (19) | 9 | ? | 6 -webkit[1] 7 |
nested calc() | 51[2] | 48 (48) | ? | ? | ? |
Support for <number> values |
? | 48 (48) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 4.0 (2) -moz 16.0 (16) |
? | ? | 6 -webkit 7 |
On gradients' color stops | ? | 19.0 (19) | ? | ? | ? |
nested calc() | 51[2] | 48 (48) | ? | ? | ? |
Support for <number> values |
? | 48 (48) | ? | ? | ? |
[1] WebKit 6.0 的实现有些错误。
[2] 点击 bug 600113
[3] See Chromium bug 600113.
量子 CSS 注释
- In Gecko,
calc()
expressions are rejected — causing the value to be invalid — when used as the radius component of aradial-gradient
function (bug 1376019). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57) fixes this. - In Gecko,
calc(1*2*3)
is not parsed successfully; Quantum CSS fixes this (bug 1379467). - In Quantum CSS, calc() is supported everywhere that the spec explains it should be (bug 1350857). In Gecko it is not.