您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么解決”,在日常操作中,相信很多人在CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么解決問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么解決”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
什么是calc()?
calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫,是css3的一個(gè)新增的功能,用來指定元素的長(zhǎng)度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過calc()計(jì)算得到元素的寬度。
語(yǔ)法
calc() = calc(四則運(yùn)算)
例如:
.elm { width: calc(expression); }
其中"expression"是一個(gè)表達(dá)式,用來計(jì)算長(zhǎng)度的表達(dá)式
說明
用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。
需要注意的是,運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% - 10px);
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算;
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則;
兼容性
簡(jiǎn)單的例子:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函數(shù)_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { width: calc(100% - 50px); background: #eee; } </style> </head> <body> <div class="test">我的寬度為100% - 50px</div> </body> </html>
下面就來講解下最常用的這個(gè):實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)的應(yīng)用
當(dāng)頁(yè)面內(nèi)容動(dòng)態(tài)加載,開始沒有滾動(dòng)條,內(nèi)容增多后出現(xiàn)滾動(dòng)條,這時(shí)使用固定寬度居中對(duì)齊布局會(huì)向左偏移一個(gè)滾動(dòng)條寬度。解決方法可以給內(nèi)容全部添加overflow-y:scroll;或者是根據(jù)內(nèi)容用css填充好再補(bǔ)充內(nèi)容。本文介紹的是calc來計(jì)算滾動(dòng)條寬度,當(dāng)有滾動(dòng)條時(shí),內(nèi)容外部也給它模擬一個(gè)滾動(dòng)條寬度,因而就不會(huì)偏移了。·
很簡(jiǎn)單,只要一行代碼就搞定了:
.wrap-outer { margin-left: calc(100vw - 100%); }
或者:
.wrap-outer { padding-left: calc(100vw - 100%); }
首先,.wrap-outer指的是居中定寬主體的父級(jí),如果沒有,創(chuàng)建一個(gè)(使用主體也是可以實(shí)現(xiàn)類似效果,不過本著寬度分離原則,不推薦);
然后,calc是css3中的計(jì)算,IE10+瀏覽器支持,IE9瀏覽器基本支持(不能用在background-position上);
最后,100vw相對(duì)于瀏覽器的window.innerWidth,是瀏覽器的內(nèi)部寬度,注意,滾動(dòng)條寬度也計(jì)算在內(nèi)!而100%是可用寬度,是不含滾動(dòng)條的寬度。
于是,calc(100vw - 100%)就是瀏覽器滾動(dòng)條的寬度大小(如果有,如果沒有滾動(dòng)條則是0)!左右都有一個(gè)滾動(dòng)條寬度(或都是0)被占用,主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦,從而沒有任何跳動(dòng)!
到此,關(guān)于“CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。