您好,登錄后才能下訂單哦!
小編給大家分享一下css3中如何使用calc()函數(shù),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
css3中的calc()是什么?可以做什么?
calc()
從字面看我們可以把它理解為一個(gè)function函數(shù)。其實(shí)calc就是英文單詞calculate(計(jì)算)的縮寫;它是一個(gè)css3新增的功能,可以用來指定元素的長度,動(dòng)態(tài)計(jì)算長度值。(推薦學(xué)習(xí):CSS3手冊(cè))
在CSS3中calc()函數(shù)可以允許我們對(duì)屬性值執(zhí)行數(shù)學(xué)運(yùn)算。
例如,我們可以使用calc()函數(shù)指定寬度值為兩個(gè)或更多數(shù)值相加的結(jié)果,而不是把元素寬度值聲明為一個(gè)靜態(tài)像素值。
.demo { width: calc(100px + 50px); }
為什么要使用calc()?
如果你使用過像sass這樣的css預(yù)處理器的話,那么你可能會(huì)遇到如下的例子:
.demo{ width: 100px + 50px; } // 使用SASS變量 $width-one: 100px; $width-two: 50px; .bar { width: $width-one + $width-two; }
然而,calc()函數(shù)提供了一個(gè)很好的解決方案,它有兩個(gè)好處。首先,我們可以組合不同的單位。具體來說,就是我們可以混合使用各種單位來進(jìn)行計(jì)算,如百分比、px、em、rem等單位都可以混在一起使用。例如,我們可以創(chuàng)建一個(gè)表達(dá)式,它將從百分比值中減去像素值。
.demo { width: calc(100% - 50px); }
在此示例中,.demo元素的寬度始終小于其父寬度的100%。
其次,使用calc()后,計(jì)算值是表達(dá)式本身,而不是表達(dá)式的結(jié)果值。這樣在使用css預(yù)處理器執(zhí)行數(shù)學(xué)表達(dá)式時(shí),給予瀏覽器的值是表達(dá)式的結(jié)果值。
// 在SCSS中指定值 .demo { width: 100px + 50px; } // 瀏覽器中編譯的CSS及其計(jì)算值 .demo { width: 150px; }
使用calc()函數(shù),瀏覽器解析的值是實(shí)際的calc()表達(dá)式。
// 在CSS中指定值 .demo { width: calc(100% - 50px); } //瀏覽器的計(jì)算值 .demo { width: calc(100% - 50px); }
這意味著瀏覽器中的值可以更加動(dòng)態(tài),并且可以隨著視圖的變化而改變。我們可以有一個(gè)元素(值為:視圖高度減去絕對(duì)值),它會(huì)隨著視圖的變化而改變。
calc()
函數(shù)的使用
calc()函數(shù)可以使用數(shù)字屬性值來執(zhí)行加、減、乘、除,四則運(yùn)算。具體而言,它可以被使用在<length>,<frequency>,<angle>,<time>,<number>,<integer>等數(shù)據(jù)類型中。
這里有一些例子 :
.demo { 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); }
注:
使用“+”和“-”時(shí),其前后必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯(cuò)誤的;
使用“*”和“/”時(shí),其前后可以沒有空格,但建議留有空格。
calc()嵌套使用
calc()函數(shù)可以嵌套使用。但是,內(nèi)部函數(shù)將被視為簡單的括號(hào)表達(dá)式。舉例來說,以下嵌套表達(dá)式 :
.demo { width: calc( 100% / calc(100px * 2) ); }
相當(dāng)于:
.demo { width: calc( 100% / (100px * 2) ); }
下面我們通過一個(gè)簡單的例子來看看calc()函數(shù)的使用
示例:居中元素(假設(shè).demo盒子的高度和寬度都為300px)
.demo { position: absolute top: calc(50% - 150px); left: calc(50% - 150px); }
這就相當(dāng)于:
.demo { position: absolute; top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; }
calc()函數(shù)的兼容性
可以看出瀏覽器對(duì)于calc()
函數(shù)的支持度還是不錯(cuò)的。
而對(duì)于不支持的瀏覽器來說,calc()函數(shù)將會(huì)把整個(gè)表達(dá)式給忽略掉。這就意味著我們將必須提供一個(gè)靜態(tài)值給不支持的瀏覽器使用。
.demo{ width: 90%; /*非支持瀏覽器設(shè)置靜態(tài)值*/ width: calc(100% - 50px); }
以上是css3中如何使用calc()函數(shù)的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。