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

CSS3的calc()函數(shù)給我們提供了計(jì)算屬性值的數(shù)學(xué)運(yùn)算方法。不需要聲明，例如，用靜態(tài)像素值來表示一個(gè)元素的寬，我們可以用calc()指定寬度是兩個(gè)或兩個(gè)以上的數(shù)值相加的結(jié)果。

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

為什么使用 calc()?

如果你使用過css預(yù)處理器，比如SASS，像上面那個(gè)例子，相信你是使用過的。

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

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

然而， calc()函數(shù)提供了更為遍歷的解決方案。首先，可以使用兩個(gè)不同的單位進(jìn)行運(yùn)算。特別的是，我們可以混合相對(duì)單位（例如百分比、窗口單位）和絕對(duì)單位（像素）。例如，我們可以創(chuàng)建一個(gè)表達(dá)式，百分比減去一個(gè)像素值。

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

在這個(gè)例子中，在父元素寬度基礎(chǔ)上，.foo這個(gè)元素總會(huì)比100%少50像素。

再者，計(jì)算值是表達(dá)式本身,而不是結(jié)果值的表達(dá)式。用CSS預(yù)處理程序在做數(shù)學(xué)表達(dá)式,給瀏覽器的是表達(dá)式的結(jié)果值。

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

// 顯示在瀏覽器中的值
.foo {
    width: 150px;
}

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

// 顯示在瀏覽器中的值
.foo {
    width: calc(100% - 50px);
}

這就表明了，瀏覽器中的值是可變的，當(dāng)窗口大小改變時(shí)。我們有一個(gè)元素的高度是窗口高度減去一個(gè)絕對(duì)值，并隨著窗口的高度變化而變化。

使用cal()

cal()函數(shù)可以進(jìn)行加減乘除的運(yùn)算。CSS函數(shù)calc()可以用在任何一個(gè)需要<length>、<frequency>, <angle>、<time>、<number>、或<integer>的地方。有了calc()，你就可以通過計(jì)算來決定一個(gè)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()函數(shù)可以被嵌套使用。然而,內(nèi)部函數(shù)將被視為簡單的括號(hào)表達(dá)式。

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

計(jì)算過后的值為

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

瀏覽器支持

cal()能被大多數(shù)瀏覽器所支持。

can I use

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

什么時(shí)候使用 cal()?

例1-居中元素

cal()函數(shù)給我們提供了另一種解決元素居中問題的方法。如果我們知道子元素的尺寸,一個(gè)典型的解決方案是給margin設(shè)置負(fù)值。

// 假設(shè) .foo 的寬高都是300px
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

使用cal()函數(shù)將更簡便

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

通過引入Flexbox,這樣的方法不是很必要。然而,在這種情況下,Flexbox不能被使用,如果需要絕對(duì)定位的元素或固定的,這種方法是可行的。

例2 - 創(chuàng)建一個(gè)根網(wǎng)格大小

cal()函數(shù)可以被用于創(chuàng)建基于窗口的網(wǎng)格的單位-rem。我們可以設(shè)置一個(gè)根元素的字體大小為窗口寬度的一部分。

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

現(xiàn)在，1rem為1/30的窗口寬度。任何文字在我們頁面上都會(huì)基于窗口大小自動(dòng)變化。

qm15jd

例3 - 清晰明了

最后，cal()函數(shù)可以用于做任何計(jì)算，使它更加清晰明了。例如,如果你想要使一系列元素的寬度為父容器的1/6,你可以這樣寫

.foo {
    width: 16.666666667%;
}

然而,這將是使別人理解其他更簡單

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

還有很多事情是可以用cal()函數(shù)做的，例如創(chuàng)建一個(gè)網(wǎng)格系統(tǒng)(Creating a Grid System)。這絕對(duì)是一個(gè)在CSS中最有用的新特性。