亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)篇--CSS3 calc實現(xiàn)滾動條出現(xiàn)頁面不跳動

894974231 / 2717人閱讀

摘要：不過最大的好處就是用在流體布局上，可以通過計算得到元素的寬度。于是，就是瀏覽器滾動條的寬度大小如果有，如果沒有滾動條則是左右都有一個滾動條寬度或都是被占用，主體內(nèi)容就可以永遠居中瀏覽器啦，從而沒有任何跳動參考的使用

什么是calc()?

calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

語法 
calc() = calc(四則運算)

例如：

.elm {
  width: calc(expression);
}

其中"expression"是一個表達式，用來計算長度的表達式

說明

用于動態(tài)計算長度值。

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

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

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

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

兼容性

簡單的例子：





calc()函數(shù)_CSS參考手冊_web前端開發(fā)參考手冊系列





我的寬度為100% - 50px

下面就來講解下最常用的這個：實現(xiàn)滾動條出現(xiàn)頁面不跳動的應(yīng)用

當(dāng)頁面內(nèi)容動態(tài)加載，開始沒有滾動條，內(nèi)容增多后出現(xiàn)滾動條，這時使用固定寬度居中對齊布局會向左偏移一個滾動條寬度。解決方法可以給內(nèi)容全部添加overflow-y:scroll;或者是根據(jù)內(nèi)容用css填充好再補充內(nèi)容。本文介紹的是calc來計算滾動條寬度，當(dāng)有滾動條時，內(nèi)容外部也給它模擬一個滾動條寬度，因而就不會偏移了。·

很簡單，只要一行代碼就搞定了：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創(chuàng)建一個（使用主體也是可以實現(xiàn)類似效果，不過本著寬度分離原則，不推薦）；
然后，calc是css3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最后，100vw相對于瀏覽器的window.innerWidth，是瀏覽器的內(nèi)部寬度，注意，滾動條寬度也計算在內(nèi)！而100%是可用寬度，是不含滾動條的寬度。
于是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被占用，主體內(nèi)容就可以永遠居中瀏覽器啦，從而沒有任何跳動！

參考

CSS3的calc()使用
calc()

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115521.html

相關(guān)文章

  • 水平居中布局與滾動條跳動的千年難題

    摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個頁面通過頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁面有滾動條，有的沒有。 絕大多數(shù)的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

    songjz 評論0 收藏0

  • 水平居中布局與滾動條跳動的千年難題

    摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個頁面通過頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁面有滾動條，有的沒有。 絕大多數(shù)的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

    techstay 評論0 收藏0

  • 水平居中布局與滾動條跳動的千年難題

    摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個頁面通過頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁面有滾動條，有的沒有。 絕大多數(shù)的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

    mo0n1andin 評論0 收藏0

  • 水平居中布局與滾動條跳動的千年難題

    摘要：于是，問題來了，信息流頁面，如新浪微博，是從上往下渲染的。，結(jié)構(gòu)類似幾個頁面通過頭部的水平導(dǎo)航刷新切換，結(jié)果有的頁面有滾動條，有的沒有。 絕大多數(shù)的頁面間布局都是水平居中布局，主體定個寬度，然后margin: 0 auto的節(jié)奏~例如，婦女之友大淘寶的首頁： .warp{ width:1190px; margin:0 auto; position:relativ...

    mist14 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<