成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Ali_ / 1557人閱讀

摘要：張鑫旭的深入理解之學(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時，等同于當(dāng)與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應(yīng)方位的尺寸限制拉伸對于單元格等需要為狀態(tài)才可以與滾動條頁面默認(rèn)滾動條來自與無

《張鑫旭的CSS深入理解之overflow》學(xué)習(xí)筆記
overflow基本屬性 overflow屬性介紹

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

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

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

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

overflow作用前提

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

overflow與滾動條

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

html {
    overflow: hidden;
}

獲取滾動高度

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

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

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

滾動條寬度機制

滾動條會占用容器的可用寬度|高度

計算滾動條寬度：containerWidth - boxWidth

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

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

解決方法：

針對IE9以下瀏覽器，強制設(shè)置html滾動

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

自定義滾動條

webkit自定義滾動條，詳細解讀

自定義滾動條插件

malihu-custom-scrollbar-plugin - 支持IE8+，擴展性極佳

antiscroll - cross-browser native OS X Lion scrollbars

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

-webkit-overflow-scrolling: touch;

overflow與BFC

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

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

overflow與絕對定位

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

避免失效的方法：

overflow元素自身為包含塊

overflow元素的子元素為包含塊

overflow元素的子元素有transform聲明

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

在overflow為visible時，resize屬性將會失效

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

overflow與錨點技術(shù)

錨點技術(shù)的實質(zhì)時容器改變滾動高度

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/117045.html

相關(guān)文章

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

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

    nanfeiyan 評論0 收藏0

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

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

    he_xd 評論0 收藏0

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

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

    Steven 評論0 收藏0

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

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

    ermaoL 評論0 收藏0

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

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

    denson 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<