日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么辦

小編給大家分享一下CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為渠縣等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及渠縣網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、渠縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

什么是calc()?

calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，用來(lái)指定元素的長(zhǎng)度。比如說(shuō)，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。為何說(shuō)是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來(lái)得到的值。不過(guò)calc()最大的好處就是用在流體布局上，可以通過(guò)calc()計(jì)算得到元素的寬度。

語(yǔ)法

calc() = calc(四則運(yùn)算)

例如：

.elm {
  width: calc(expression);
}

其中"expression"是一個(gè)表達(dá)式，用來(lái)計(jì)算長(zhǎng)度的表達(dá)式

說(shuō)明

用于動(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ī)則；

兼容性

CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么辦

簡(jiǎn)單的例子：





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




我的寬度為100% - 50px

下面就來(lái)講解下最常用的這個(gè)：實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)的應(yīng)用

當(dāng)頁(yè)面內(nèi)容動(dòng)態(tài)加載，開(kāi)始沒(mé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來(lái)計(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í)，如果沒(méi)有，創(chuàng)建一個(gè)（使用主體也是可以實(shí)現(xiàn)類似效果，不過(guò)本著寬度分離原則，不推薦）；

然后，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)條的寬度大?。ㄈ绻?，如果沒(méi)有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒(méi)有任何跳動(dòng)！

以上是“CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


當(dāng)前題目：CSS3中Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)怎么辦
轉(zhuǎn)載來(lái)于：http://www.dlmjj.cn/article/ieosph.html