译自How calc() Works - written by Ire Aderinokun

CSS3的calc()函数给我们提供了计算属性值的数学运算方法。不需要声明，例如，用静态像素值来表示一个元素的宽，我们可以用calc()指定宽度是两个或两个以上的数值相加的结果。

.foo {
    width: calc(100px + 50px);
}

为什么使用 calc()?

如果你使用过css预处理器，比如SASS，像上面那个例子，相信你是使用过的。

.foo {
    width: 100px + 50px;
}

// 使用 SASS 变量
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

然而， calc()函数提供了更为遍历的解决方案。首先，可以使用两个不同的单位进行运算。特别的是，我们可以混合相对单位（例如百分比、窗口单位）和绝对单位（像素）。例如，我们可以创建一个表达式，百分比减去一个像素值。

.foo {
    width: calc(100% - 50px);
}

在这个例子中，在父元素宽度基础上，.foo这个元素总会比100%少50像素。

再者，计算值是表达式本身,而不是结果值的表达式。用CSS预处理程序在做数学表达式,给浏览器的是表达式的结果值。

// 在 SCSS 中的值
.foo {
    width: 100px + 50px;
}

// 显示在浏览器中的值
.foo {
    width: 150px;
}

// 在 CSS 中的值
.foo {
    width: calc(100% - 50px);
}

// 显示在浏览器中的值
.foo {
    width: calc(100% - 50px);
}

这就表明了，浏览器中的值是可变的，当窗口大小改变时。我们有一个元素的高度是窗口高度减去一个绝对值，并随着窗口的高度变化而变化。

使用cal()

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

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

嵌套使用cal()

cal()函数可以被嵌套使用。然而,内部函数将被视为简单的括号表达式。

.foo {
    width: calc( 100% / calc(100px * 2) );
}

计算过后的值为

.foo {
    width: calc( 100% / (100px * 2) );
}

浏览器支持

cal()能被大多数浏览器所支持。

can I use

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

什么时候使用 cal()?

例1-居中元素

cal()函数给我们提供了另一种解决元素居中问题的方法。如果我们知道子元素的尺寸,一个典型的解决方案是给margin设置负值。

// 假设 .foo 的宽高都是300px
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

使用cal()函数将更简便

.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

通过引入Flexbox,这样的方法不是很必要。然而,在这种情况下,Flexbox不能被使用,如果需要绝对定位的元素或固定的,这种方法是可行的。

例2 - 创建一个根网格大小

cal()函数可以被用于创建基于窗口的网格的单位-rem。我们可以设置一个根元素的字体大小为窗口宽度的一部分。

html {  
    font-size: calc(100vw / 30);
}

现在，1rem为1/30的窗口宽度。任何文字在我们页面上都会基于窗口大小自动变化。

qm15jd

例3 - 清晰明了

最后，cal()函数可以用于做任何计算，使它更加清晰明了。例如,如果你想要使一系列元素的宽度为父容器的1/6,你可以这样写

.foo {
    width: 16.666666667%;
}

然而,这将是使别人理解其他更简单

.foo {
    width: calc(100% / 6);
}

还有很多事情是可以用cal()函数做的，例如创建一个网格系统(Creating a Grid System)。这绝对是一个在CSS中最有用的新特性。