CSS深入理解之overflow
前言
這是跟着張鑫旭重學CSS的overflow篇
基本屬性
overflow有以下五個基本屬性:
1.visible : 默認值,具體表現為,應用此屬性后,子元素超出時,繼續展示;
2.hidden: 超出的部分隱藏;
3.scroll: 超出時展示滾動條;
4.auto: 自動判斷;
5.inherit:繼承父元素
overflow-x和overflow-y是IE8以上瀏覽器支持的屬性,如果overflow-x/y相同,則等同於overflow屬性.如果不同,並且一個屬性是visible,另一個屬性是hidden/auto/scroll,則visible會重置為auto.
如何讓overflow起作用
- 非
display:inline水平; - 對應方位的尺寸限制,寬高/最大寬高/absolute拉伸等
- 對於單元格
td元素,需要table為table-layout:fixed才可以
overflow:visible妙用
IE7瀏覽器下,文字越多,按鈕兩側的padding留白越多,只要給按鈕添加一個overflow:visible 屬性,即可正常表現
滾動條
出現條件
- overflow:auto/scroll
- 一些默認的元素,比如說html/textarea
說明: 無論說明瀏覽器,默認滾動條來自<html>而不是body
頁面的滾動高度
谷歌瀏覽器document.body.scrollTop;
其他瀏覽器:document.documentElement.scrollTop;
兩者不會同時存在,建議使用
var st=document.documentElement.scrollTop || document.body.scrollTop
滾動條的寬度機制
滾動條是會占用容器的可用寬度或高度;這個特性可能會對我們的頁面布局有一些不好的影響,這就需要我們進行特出是處理
overflow 和 BFC
具體應用有一下幾種
- 清楚浮動影響
在之前的浮動文章中提到過,.浮動會導致父容器高度塌陷,那么這個時候我們可以設置子元素的overflow:hidden來清除浮動具體的代碼這里不說了. - 避免margin重疊
我們知道,兩個緊鄰的元素,設置margin時,兩個元素的margin會重疊在一起,那么這個時候我們可以設置元素的overflow值,就可解決這個問題,當然還有其他的方式,比如使用邊框/padding或者元素自身BFC化 - 兩欄自適應布局
具體可參看之前的浮動
http://www.cnblogs.com/heyuqing/p/6148488.html
overflow與絕對定位
overflow:hidden/auto失效
當給一個應用了overflow:hidden/auto屬性的元素定位為absolute時,其特性失效.
原因: 絕對定位元素不總是被父級overflow屬性剪裁,尤其當overflow在絕對定位元素及其包含塊之間時;
[包含塊]:含有position:relative/absolute/fixed聲明的父級元素,沒有則為body元素.
如何避免失效
- overflow元素自身為包含塊;
給overflow元素添加relatIve等屬性 - overflow子元素為包含塊;
在被剪裁元素與overflow元素之間插入一個relative等的元素 - 任意合法的transform聲明當做包含塊.
依賴overflow的樣式表現
CSS3的resize屬性
resize屬性可以拉伸元素其屬性值為:
both:水平垂直拉伸
horizontal:水平方向拉伸;
vertical:垂直方向拉伸
但是,要想此屬性起作用,元素的overflow屬性不能為visible.
ellipsis文字溢出...省略
使用text-overflow:ellipsis屬性,在文字溢出時,會用省略號來表示多余的文字,前提是元素同時應用overflow:hidden屬性