calc

跳转到：
  1. 概述
  2. 语法
  3. 例子
  4. 规范
  5. 浏览器兼容性
  6. 也可以看看

概述

CSS函数calc()可以用在任何一个需要<length>、<frequency>, <angle>、<time>、<number>、或<integer>的地方。有了calc()，你就可以通过计算来决定一个CSS属性的值了。

你还可以在一个 calc() 内部嵌套另一个 calc() ，里面的 calc() 会被简单地视为加了括号。 

语法

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

值

expression
一个数学表达式,该表达式的结果会作为最终的值。

表达式

该表达式可以使用以下运算符任意组合（使用正常的运算符优先级顺序）。

+
加法
-
减法
*
乘法，乘数中至少要有一个是 <number> 类型的
/
除法，被除数（/右面的数）必须是 <number> 类型的

表达式中的操作数可以使用任意语法种类的长度。如果你愿意，你可以在一个表达式中混用多种不同的长度单位。在需要时，你还可以使用小括号来调整计算顺序。

注：用 0 作除数会让 HTML 解析器抛出异常.
注：+ 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
注： Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MAY be treated as if 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 注释

也可以看看

文档标签和贡献者

标签： 
此页面的贡献者： silence1amb, xgqfrms-GitHub, JohannLai, ihewro, jdk137, TiaossuP, Prinz_Rana, SphinxKnight, cuixiping, teoli, ziyunfei
最后编辑者: silence1amb,