【學習筆記】CSS深入理解之overflow

Ali_ 發布于2019-08-30 15:54 / 1455人閱讀

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

《張鑫旭的CSS深入理解之overflow》學習筆記

overflow基本屬性 overflow屬性介紹

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

當overflow-x 與 overflow-y值相同時，等同于overflow

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

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

overflow作用前提

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

overflow與滾動條

頁面默認滾動條來自html（與body無關），因此若要去除默認滾動條，只需要

html {
    overflow: hidden;
}

獲取滾動高度

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

內部padding-bottom缺失

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

滾動條寬度機制

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

計算滾動條寬度：containerWidth - boxWidth

因寬度占用，overflow: auto可能會造成容器內部局部混亂，因此容器內部需使用自適應布局

水平居中跳動問題，容器定寬居中時，當視口高度變化導致滾動條出現將導致容器跳動。

解決方法：

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

其他瀏覽器，利用calc函數計算滾動條寬度（瀏覽器寬度 - 可用內容區寬度），通過padding把寬度補給容器 - 效果演示

自定義滾動條

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

自定義滾動條插件

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

antiscroll - cross-browser native OS X Lion scrollbars

iOS原生滾動回調

-webkit-overflow-scrolling: touch;

overflow與BFC

overflow: visible不會產生BFC

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

overflow與絕對定位

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

避免失效的方法：

overflow元素自身為包含塊

overflow元素的子元素為包含塊

overflow元素的子元素有transform聲明

依賴overflow的樣式表現

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

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

overflow與錨點技術

錨點技術的實質時容器改變滾動高度

云服務器 GPU云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117045.html

【學習筆記】CSS深入理解之relative

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

nanfeiyan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之border

摘要：張鑫旭的深入理解之學習筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。可以利用該特性實現圖標變色的效果與定位不計算區域，只限于以內的盒子。張鑫旭的CSS深入理解之border學習筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。因此從語義上來說，...

he_xd 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之z-index

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

Steven 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之vertical-align

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

ermaoL 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之float

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

denson 2019-08-29 17:31 評論0 收藏0