成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【學(xué)習(xí)筆記】CSS深入理解之overflow

Ali_ / 1465人閱讀

摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對(duì)應(yīng)方位的尺寸限制拉伸對(duì)于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁面默認(rèn)滾動(dòng)條來自與無

《張?chǎng)涡竦腃SS深入理解之overflow》學(xué)習(xí)筆記
overflow基本屬性 overflow屬性介紹

overflow: visible(默認(rèn))|hidden|scroll|auto|inherit

當(dāng)overflow-x 與 overflow-y值相同時(shí)，等同于overflow

當(dāng)overflow-x 與 overflow-y值不相同時(shí)，其中一個(gè)值被賦予hidden|auto|scroll時(shí)，若另一個(gè)值為visible，
那這個(gè)visvible會(huì)被重置為auto

https://codepen.io/curlywater...

overflow作用前提

元素非 display: inline
對(duì)應(yīng)方位的尺寸限制: width/height/max-width/max-height/absolute拉伸
對(duì)于單元格等, 需要 table 為 table-layout: fixed 狀態(tài)才可以

overflow與滾動(dòng)條

頁面默認(rèn)滾動(dòng)條來自html（與body無關(guān)），因此若要去除默認(rèn)滾動(dòng)條，只需要

html {
    overflow: hidden;
}

獲取滾動(dòng)高度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
/* chrome瀏覽器：document.body.scrollTop */
/* 其他瀏覽器：document.documentElement.scrollTop*/

內(nèi)部padding-bottom缺失

除Chrome之外的其他瀏覽器會(huì)有padding-bottom缺失效果，將導(dǎo)致scrollHeight值不一致

滾動(dòng)條寬度機(jī)制

滾動(dòng)條會(huì)占用容器的可用寬度|高度

計(jì)算滾動(dòng)條寬度：containerWidth - boxWidth

因?qū)挾日加?，overflow: auto可能會(huì)造成容器內(nèi)部局部混亂，因此容器內(nèi)部需使用自適應(yīng)布局

水平居中跳動(dòng)問題，容器定寬居中時(shí)，當(dāng)視口高度變化導(dǎo)致滾動(dòng)條出現(xiàn)將導(dǎo)致容器跳動(dòng)。

解決方法：

針對(duì)IE9以下瀏覽器，強(qiáng)制設(shè)置html滾動(dòng)

其他瀏覽器，利用calc函數(shù)計(jì)算滾動(dòng)條寬度（瀏覽器寬度 - 可用內(nèi)容區(qū)寬度），通過padding把寬度補(bǔ)給容器 - 效果演示

自定義滾動(dòng)條

webkit自定義滾動(dòng)條，詳細(xì)解讀

自定義滾動(dòng)條插件

malihu-custom-scrollbar-plugin - 支持IE8+，擴(kuò)展性極佳

antiscroll - cross-browser native OS X Lion scrollbars

iOS原生滾動(dòng)回調(diào)

-webkit-overflow-scrolling: touch;

overflow與BFC

overflow: visible不會(huì)產(chǎn)生BFC

overflow: hidden|scroll|auto 產(chǎn)生BFC，但是具有溢出不可見的副作用

overflow與絕對(duì)定位

overflow失效：絕對(duì)定位元素不總是被overflow元素剪裁/隨滾動(dòng)條滾動(dòng)，尤其當(dāng)overflow元素處于絕對(duì)定位元素和其包含塊中間時(shí)

避免失效的方法：

overflow元素自身為包含塊

overflow元素的子元素為包含塊

overflow元素的子元素有transform聲明

依賴overflow的樣式表現(xiàn)

在overflow為visible時(shí)，resize屬性將會(huì)失效

text-overflow: ellipsis以overflow: hidden為前提

overflow與錨點(diǎn)技術(shù)

錨點(diǎn)技術(shù)的實(shí)質(zhì)時(shí)容器改變滾動(dòng)高度

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117045.html

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之relative

    摘要：張?chǎng)涡竦纳钊肜斫庵畬?duì)絕對(duì)定位元素的限制限制定位限制層次限制，原本對(duì)絕對(duì)定位元素?zé)o效，容器設(shè)置的情況下生效的定位特性相對(duì)于自身無侵入，不會(huì)對(duì)其他元素的布局產(chǎn)生影響與與同時(shí)存在時(shí)，忽視的層疊特性可以提高層疊上下文為具體數(shù)值時(shí)，限制內(nèi)部絕對(duì)定位 張?chǎng)涡竦腃SS深入理解之relative relative對(duì)絕對(duì)定位元素的限制 限制定位 限制層次 限制overflow，overflow原本對(duì)絕...

    nanfeiyan 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之border

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變?？梢岳迷撎匦詫?shí)現(xiàn)圖標(biāo)變色的效果與定位不計(jì)算區(qū)域，只限于以內(nèi)的盒子。 張?chǎng)涡竦腃SS深入理解之border學(xué)習(xí)筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。因此從語義上來說，...

    he_xd 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

    Steven 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之vertical-align

    摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個(gè)的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對(duì)齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...

    ermaoL 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之float

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張?chǎng)涡竦腃SS深入理解之float浮動(dòng)學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...

    denson 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<