小編給大家分享一下css calc()的作用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供湘橋網(wǎng)站建設(shè)、湘橋做網(wǎng)站、湘橋網(wǎng)站設(shè)計、湘橋網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、湘橋企業(yè)網(wǎng)站模板建站服務(wù)，十余年湘橋做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

css calc()的作用是動態(tài)計算長度值，該函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)操作，使用語法如“.foo {  width: calc(100px + 50px);}”，該語句表示指定一個元素寬的固定像素值為多個數(shù)值的和。

css3的calc() 函數(shù)用于動態(tài)計算長度值。

calc()函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。

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

說明：

• 需要注意的是，運(yùn)算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

• 任何長度值都可以使用calc()函數(shù)進(jìn)行計算；

• calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

• calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則；

為什么是 calc()

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

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

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

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

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

第二，使用 calc()，計算值是表達(dá)式它自己，而非表達(dá)式的結(jié)果。當(dāng)使用 CSS 預(yù)處理器做數(shù)學(xué)運(yùn)算時，給定值為表達(dá)式的結(jié)果。

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

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

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

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

使用 calc()

calc() 函數(shù)可以用來對數(shù)值屬性執(zhí)行四則運(yùn)算。比如，，，，， 或者 數(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);
}

clac() 嵌套

calc() 函數(shù)可以嵌套。在函數(shù)里邊，會被視為簡單的括號表達(dá)式，如下例所示。

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

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

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

降級方案

clac() 已經(jīng)得到普遍支持。

對于不支持 calc() 的瀏覽器，整個屬性值表達(dá)式將被忽略。不過我們可以對那些不支持 calc() 的瀏覽器，使用一個固定值作為降級方案。

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

vi設(shè)計http://www.maiqicn.com 辦公資源網(wǎng)站大全https://www.wode007.com

什么場景可以使用 calc()

Example 1 - 居中元素

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

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

使用 calc() 函數(shù)，我們僅僅通過 top 與 left 屬性便能實(shí)現(xiàn)相同的效果：

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

Flexbox 的介入，已經(jīng)很少需要這種方法了。不過，一些情況下 Flexbox 不能被使用。比如，元素需要絕對定位或者固定定位，這種方法是有用的。

Example 2 - 創(chuàng)建根柵格尺寸

使用 rem，calc() 函數(shù)能夠用來創(chuàng)建一個基于視口的柵格。我們可以設(shè)置根元素的字體大小為視口寬度的一部分。

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

現(xiàn)在，1rem 為視口寬度的 1/30。在頁面上的任何文本，將會根據(jù)你的視口自動縮放。更進(jìn)一步，相同比例的視口總會顯示相同的文本數(shù)量，不管視口的真實(shí)尺寸是多少。

如果我們對非文本使用 rem 設(shè)置大小，它們同樣遵守這個行為。一個 1rem 寬度的元素總是視口元素寬度的 1/30。

Example 3 - 清晰度

最后，calc()使計算更加清晰。如果你使一組項(xiàng)目為它們父元素容器寬度的 1/6，你可能這么寫：

.foo {    width: 16.666666667%;
}

然而，它能夠更加清晰并具有可讀性：

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

使用 calc()，我們還能做更多的事情，比如創(chuàng)建一個柵格系統(tǒng)。它是 CSS 最有用的新特性之一。

以上是css calc()的作用的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！