CSS中calc()函數(shù)怎么用

這篇文章主要介紹了CSS中calc()函數(shù)怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

　　.foo {

　　width: calc(100px + 50px);

　　}

　　為什么是 calc()

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

　　.foo {

　　width: 100px + 50px;

　　}

　　$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é)果。

　　.foo {

　　width: 100px + 50px;

　　}

　　.foo {

　　width: 150px;

　　}

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

　　.foo {

　　width: calc(100% - 50px);

　　}

　　.foo {

　　width: calc(100% - 50px);

　　}

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

　　使用 calc()

　　calc() 函數(shù)可以用來(lái)對(duì)數(shù)值屬性執(zhí)行四則運(yùn)算。比如，<length>，<frequency>，<angle>，<time>，<number> 或者 <integer> 數(shù)據(jù)類(lèi)型。

　　這里有一些示例：

　　.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ù)里邊，會(huì)被視為簡(jiǎn)單的括號(hào)表達(dá)式，如下例所示。

　　.foo {

　　width: calc( 100% / calc(100px * 2) );

　　}

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

　　.foo {

　　width: calc( 100% / (100px * 2) );

　　}

　　降級(jí)方案

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

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

　　.foo {

　　width: 90%;

　　width: calc(100% - 50px);

　　}

　　什么場(chǎng)景可以使用 calc()

　　Example 1 - 居中元素

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

　　.foo {

　　position: absolute

　　top: 50%;

　　left: 50%;

　　marging-top: -150px;

　　margin-left: -150px;

　　}

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

　　.foo {

　　position: absolute

　　top: calc(50% - 150px);

　　left: calc(50% - 150px);

　　}

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

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

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

　　html {

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

　　}

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

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

　　Example 3 - 清晰度

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

　　.foo {

　　width: 16.666666667%;

　　}

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

　　.foo {

　　width: calc(100% / 6);

　　}

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中calc()函數(shù)怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!