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

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

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

為什么使用 calc()?

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

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

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

然而仔燕， calc()函數(shù)提供了更為遍歷的解決方案。首先魔招，可以使用兩個不同的單位進行運算晰搀。特別的是，我們可以混合相對單位（例如百分比办斑、窗口單位）和絕對單位（像素）厕隧。例如，我們可以創(chuàng)建一個表達式，百分比減去一個像素值吁讨。

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

在這個例子中髓迎，在父元素寬度基礎(chǔ)上，.foo這個元素總會比100%少50像素建丧。

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

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

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

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

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

這就表明了橄维，瀏覽器中的值是可變的，當(dāng)窗口大小改變時拴曲。我們有一個元素的高度是窗口高度減去一個絕對值争舞，并隨著窗口的高度變化而變化。

使用cal()

cal()函數(shù)可以進行加減乘除的運算澈灼。CSS函數(shù)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()函數(shù)可以被嵌套使用埋虹。然而,內(nèi)部函數(shù)將被視為簡單的括號表達式缠局。

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

計算過后的值為

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

瀏覽器支持

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

can I use

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

什么時候使用 cal()?

例1-居中元素

cal()函數(shù)給我們提供了另一種解決元素居中問題的方法耳贬。如果我們知道子元素的尺寸,一個典型的解決方案是給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不能被使用,如果需要絕對定位的元素或固定的,這種方法是可行的。

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

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

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

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

qm15jd

例3 - 清晰明了

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

.foo {
    width: 16.666666667%;
}

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

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

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