css筆記 - 張鑫旭css課程筆記之 overflow 篇
overflow基本屬性值
visible（默認值）：超出依然顯示
hidden ：超出隱藏
scroll ：超出，滾動顯示。子元素不超出也會有滾動條的那條軌道。
auto:如果超出，滾動顯示。如果不超出，也不會有滾動條的位置。
inherit：ie8+，繼承父元素的overflow屬性值。
overflow-x/y（ie8+）規範：
如果overflow-x、overflow-y的值相同，則等同於overflow設置了這個值。
如果overflow-x、overflow-y的值不相同，且其中一個屬性的值被賦予visible，而另一個被賦予scroll、auto、hidden等值，那麽visible會被重置為auto。
比如：overflow-x：hidden；那麽overflow-y就會被重置為auto。兼容性：
- 長得不一樣
- 寬度設定機制差異
overflow屬性起作用的條件：
display非inline
對應方位的尺寸限制，有width/height/max-width/max-height/absolute拉伸
對於單元格td等，還需要table為
table-layout:fixed;狀態才行
overflow妙用
IE7瀏覽器下，文字越多，按鈕兩側的padding留白就越大。其他瀏覽器則正常。
解決： 給所有按鈕添加css樣式：overflow:visible;後就可以了。
overflow與滾動條
滾動條出現的條件
overflow:auto;或overflow: scroll;html、textarea等元素天生自帶overflow：auto；功能。
內容尺寸超出了容器尺寸的額限制
滾動條的寬度機制
滾動條會占用容器的可用寬度或高度
IE7/Chrome/FireFox(Win7)下都是17像素
滾動條與body/html關系
無論什麽瀏覽器，默認滾動條均來自html元素而不是body標簽。
其overflow值默認為auto。
所以，如果在單頁應用中想要去掉頁面的默認滾動條效果，只需要：
html{overflow: hidden;}沒有必要設置body。因為頁面滾動條不是作用在body上的。
新建一個空白頁面，body標簽有一個0.5em的默認margin值。
自定義滾動條插件
Jquery自定義滾動條，
git地址，兼容到ie8+以上瀏覽器
js滾動高度
Chrome瀏覽器寫法：
document.body.scrollTop其他瀏覽器：
document.documentElement.scrollTop二者不會同時存在,兼容寫法：
var oH = document.body.scrollTop || document.documentElement.scrollTop;overflow的padding-bottom缺失現象：（非chrome）
即，如果父元素中內容高度超出出現滾動條，同時父元素又有padding-bottom值，那麽在非chrome瀏覽器中，padding-bottom可能不在滾動高度計算範圍內。
這種現象會導致，scrollTop(元素內容高度)的計算差異
移動端滾動技能——ios原生滾動回調效果：
-webkit-overflow-scrolling:touch;
overflow與BFC
BFC(Block formatting context)：塊級格式化上下文
就像一個水杯，一個容器。元素內部再怎麽攪拌折騰都撒不出來，影響不了外部。
BFC元素不會讓元素及元素內部的內容與外邊有任何瓜葛。、所以形成BFC的元素可以清除浮動帶來的影響，不然的話，子元素浮動，父元素塌陷，父元素的兄弟元素會和父元素的子元素重疊，就違背了bfc的初衷，所以要清除浮動帶來的影響。
可以觸發BFC的overflow屬性值：
scroll、auto、hidden這三個可以觸發元素的BFC特性。visible不會。
可以觸發BFC的幾種情況分析：
overflow: 非visible；有自適應性，但是溢出不可見限制了其使用場景
float + float： 包裹性+破壞性。但是無法自適應。只適用於塊狀浮動布局。
position: absolute;元素脫離文檔流。但是屬於單個元素的自娛自樂。
display:inline-block；包裹性，無法自適應。但是IE6/7 block水平不相識
display：table-cell；包裹性，但是天生無溢出特性，寬度再寬也不會超出父容器。絕對寬度也能自適應。
利用overflow形成BFC的應用：
- 清除浮動影響
- 父元素設置overflow：auto/scroll/hidden；可以清除子元素浮動帶來的影響。（形成bfc結界，與外界隔絕）
僅支持ie7+及現代瀏覽器
避免margin穿透/重疊問題（形成bfc結界，與外界隔絕）
兩欄自適應布局
overflow與absolute
隱藏失效
即overflow：hidden；失效。
當元素設置position：absolute；絕對定位且無方位值(left、right、bottom、top)設置。
並且父元素沒有設置position：relative；限制子元素的時候，子元素就不受父元素overflow：hidden；的限制，即使超出也不會被隱藏了！
css筆記 - 張鑫旭css課程筆記之 overflow 篇