calc

概述

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

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

语法

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

值

expression

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

表达式

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

+

加法

-

减法

*

乘法，乘数中至少要有一个是 <number> 类型的

/

除法，被除数（/右面的数）必须是 <number> 类型的

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

Formal syntax

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: 5%;                         /* fallback for browsers without support for calc() */
  left: calc(40px);
  width: 90%;                       /* fallback for browsers without support for calc() */
  width: calc(100% - 80px);  
  border: solid black 1px;
  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() 就仅仅相当于是一个括号。

规范

浏览器兼容性

[1] WebKit 6.0 的实现有些错误。

[2] 点击 bug 600113 

相关链接

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog