CSS3 的 calc() 函數(shù)允許我們?cè)趯傩灾抵袌?zhí)行數(shù)學(xué)計(jì)算操作。例如，我們可以使用 calc() 指定一個(gè)元素寬的固定像素值為多個(gè)數(shù)值的和。

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

為什么是 calc()

如果你使用過 CSS預(yù)處理器，比如 SASS，以上示例你或許碰到過。

.foo {    width: 100px + 50px;}
// Or using SASS variables$width-one: 100px;$width-two: 50px;.bar {    width: $width-one + $width-two;}

然而，calc() 函數(shù)提供了更好的解決方案。首先，我們能夠組合不同的單元。特別是，我們可以混合計(jì)算絕對(duì)單元（比如百分比與視口單元）與相對(duì)單元（比如像素）。例如，我們可以創(chuàng)造一個(gè)表達(dá)式，用一個(gè)百分比減掉一個(gè)像素值。

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

本例中，.foo 元素總是小于它父元素寬度 50px。 第二，使用 calc()，計(jì)算值是表達(dá)式它自己，而非表達(dá)式的結(jié)果。當(dāng)使用 CSS 預(yù)處理器做數(shù)學(xué)運(yùn)算時(shí)，給定值為表達(dá)式的結(jié)果。

// Value specified in SCSS.foo {    width: 100px + 50px;}
// Compiled CSS and computed value in browser.foo {    width: 150px;}

然而，瀏覽器解析的 calc() 的值為真實(shí)的 calc() 表達(dá)式。

// Value specified in CSS.foo {    width: calc(100% - 50px);}
// Computed value in browser.foo {    width: calc(100% - 50px);}

這意味著瀏覽器中的值可以更加靈活，能夠響應(yīng)視口的改變。我們能夠給元素設(shè)定一個(gè)高度為視口的高度減去一個(gè)絕對(duì)值，它將隨視口的改變進(jìn)行調(diào)節(jié)。

使用 calc()

calc() 函數(shù)可以用來對(duì)數(shù)值屬性執(zhí)行四則運(yùn)算。比如，<length>，<frequency>，<angle>，<time>，<number> 或者 <integer 數(shù)據(jù)類型 這里有一些示例：

.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);}

calc() 函數(shù)可以用來對(duì)數(shù)值屬性執(zhí)行四則運(yùn)算。比如

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

函數(shù)的計(jì)算值如下所示：

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

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)