淺談CSS calc()函數的用法

CSS3 的 calc() 函數容許咱們在屬性值中執行數學操做。例如，咱們能夠使用 calc() 指定一個元素寬的固定像素值爲多個數值的和。

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

爲何是 calc()

若是你使用過 CSS 預處理器，好比 SASS，以上示例你或許碰到過

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

$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

然而，calc() 函數提供了更好的解決方案。首先，咱們可以組合不一樣的單元。特別是，咱們能夠混合計算絕對單位（好比百分比與視口單元）與相對單位（好比像素）。例如，咱們能夠創造一個表達式，用一個百分比減掉一個像素值。

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

本例中，.foo 元素老是小於它父元素寬度 50px。

第二，使用 calc()，計算值是表達式它本身，而非表達式的結果。當使用 CSS 預處理器作數學運算時，給定值爲表達式的結果。

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

.foo {
    width: 150px;
}

然而，瀏覽器解析的 calc() 的值爲真實的 calc() 表達式。

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

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

這意味着瀏覽器中的值能夠更加靈活，可以響應視口的改變。咱們可以給元素設定一個高度爲視口的高度減去一個絕對值，它將隨視口的改變進行調節。

使用 calc()

calc() 函數能夠用來對數值屬性執行四則運算。好比，<length>，<frequency>，<angle>，<time>，<number> 或者 <integer> 數據類型。

這裏有一些示例：

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

clac() 嵌套

calc() 函數能夠嵌套。在函數裏邊，會被視爲簡單的括號表達式，以下例所示。

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

函數的計算值以下所示：

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

降級方案

clac() 已經獲得廣泛支持。

對於不支持 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過咱們能夠對那些不支持 calc() 的瀏覽器，使用一個固定值做爲降級方案。

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

什麼場景能夠使用 calc()

Example 1 - 居中元素

使用 calc() 給咱們提供另外一個垂直居中元素的解決方案。若是咱們知道元素的尺寸，一個典型的解決方案是使用負外邊距移動自身距離高與寬的一半，以下所示：

.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

使用 calc() 函數，咱們僅僅經過 top 與 left 屬性便能實現相同的效果：

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

Flexbox 的介入，已經不多須要這種方法了。不過，一些狀況下 Flexbox 不能被使用。好比，元素須要絕對定位或者固定定位，這種方法是有用的。

Example 2 - 建立根柵格尺寸

使用 rem，calc() 函數可以用來建立一個基於視口的柵格。咱們能夠設置根元素的字體大小爲視口寬度的一部分。

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

如今，1rem 爲視口寬度的 1/30。在頁面上的任何文本，將會根據你的視口自動縮放。更進一步，相同比例的視口總會顯示相同的文本數量，無論視口的真實尺寸是多少。

若是咱們對非文本使用 rem 設置大小，它們一樣遵照這個行爲。一個 1rem 寬度的元素老是視口元素寬度的 1/30。

Example 3 - 清晰度

最後，calc()使計算更加清晰。若是你使一組項目爲它們父元素容器寬度的 1/6，你可能這麼寫：

.foo {
    width: 16.666666667%;
}

然而，它可以更加清晰並具備可讀性：

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

使用 calc()，咱們還能作更多的事情，好比建立一個柵格系統。它是 CSS 最有用的新特性之一。