讀《css3》— CSS3運(yùn)算 calc()函數(shù)是怎么實(shí)現(xiàn)計(jì)算
就是沒(méi)有昵稱哈
發(fā)布于 云南 2021-05-21 · 1.5w瀏覽 6贊

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

 

為什么是 calc()

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

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

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

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

這意味著瀏覽器中的值可以更加靈活,能夠響應(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ù)類型 這里有一些示例:

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

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

就是沒(méi)有昵稱哈
這人很懶,什么都沒(méi)留下~
瀏覽 1.5w
6
相關(guān)推薦
最新評(píng)論
贊過(guò)的人 6
評(píng)論加載中...

暫無(wú)評(píng)論,快來(lái)評(píng)論吧!