關於Overflow hidden 的理解

2022-05-14 20:25:56 字數 2063 閱讀 3644

overflow: hidden 的使用

引用:overflow 版本:css2  相容性:ie4+ ns6+ 繼承性:無

語法:overflow : visible | auto | hidden | scroll

引數:visible :  不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效

auto :  此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條

hidden :  不顯示超過物件尺寸的內容

scroll :  總是顯示滾動條

說明:檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

設定textarea物件為hidden值將隱藏其滾動條。

對於table來說,假如table-layout屬性設定為fixed,則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden,scroll或者auto,那麼超出td尺寸的內容將被剪下。如果設為visible,將導致額外的文字溢位到右邊或左邊(視direction屬性設定而定)的單元格。

自ie5開始,此屬性在mac平台上可用。

overflow:hidden清除浮動

一提到清除浮動,我們就會想到另外乙個css樣式:clear:both,我相信對於這個屬性的理解大家都不成問題的。但是對於「浮動」這個詞到底包含什麼樣的含義呢?我們下面來詳細的闡述一下。

這是乙個常用的div寫法,下面我們來書寫樣式。大家可以在dmx中自己做試驗

#outside

#inside

可以看到,我給inside這個id加了乙個浮動,我們常規的理解是,我們允許inside這個id的div的右邊出現其他的內容,只要它的寬度不超過outside這個div和inside這個div的剩餘值。如果div outside中還包含其他的div,我不允許它出現在inside的右側,我們則用樣式clear:both指定這個div,不允許它浮動在inside右側。這些在ie6裡面是正確的。但是在火狐或者其他瀏覽器裡面,我們發現問題並非如此簡單。我們發現,當inside這個div的寬度和高度都大於outside這個div的時候,outside並沒有被內撐開而是依舊顯示為我們指定的寬高。在我的例子中,都是500。這個時候我不理解了,我搜尋了很多的資料,但是都沒能理解這是為什麼,直到看到別人在類似的情況下給outside這個div加了乙個overflow:hidden這個屬性解決了這個問題。我們直到overflow:hidden這個屬性的作用是隱藏溢位,給outside加上這個屬性後,我們的inside的寬高自動的被隱藏掉了。另外,我們再做乙個試驗,將outside這個div的高度值刪除後,我們發現,outside的高度自動的被inside這個div的高度值給撐開了。

說到這裡,我們再來理解一下「浮動」這個詞的含義。我們原先的理解是,在乙個平面上的浮動,但是通過這個試驗,我們發現,這不僅僅是乙個平面上的浮動,而是乙個立體的浮動!也就是說,當inside這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了outside這個div,也就是說,此時的inside的寬高是多少,對於已經脫離了的outside來說,都是不起作用的。當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什麼意思了。也就是說,當我們給outside這個div加上overflow:hidden這個屬性的時候,其中的inside等等帶浮動屬性的div的在這個立體的浮動已經被清除了。這就是overflow:hidden這個屬性清除浮動的準確含義。

當我們沒有給outside這個div設定高度的時候,inside這個div的高度,就會撐開outside這個div,而在另乙個方面,我們要注意到的是,當我們給outside這個div加上乙個高度值,那麼無論inside這個div的高度是多少,outside這個高度都是我們設定的值。而當inside的高度超過outside的高度的時候,超出的部分就會被隱藏。這就是隱藏溢位的含義!

為了說明清除浮動的必要性,下面給個具體的例子:

下面的頁面,在ie各個版本下面顯示會不一樣,ie8和ff是一致的。但給outside加上overflow:hidden;則都顯示一致了,這就是清除浮動的效果。

">

">

1111111222

關於程式關於世界

首先,在學了1年多的軟體設計的基礎上,問下自己 程式是什麼?業務需求是什麼?程式有什麼用?什麼是演算法?什麼是資料庫?或許每個人的理解不同,會給出不同的答案。那麼自己的理解 程式是乙個讓計算機工作的流程,在程式寫好之後,計算機就會按照,程式設計師定義好流程在執行。其實很多時候,乙個程式的好壞,在於乙...

關於血液關於軟體

1 自然沉降法 將血袋垂直吊掛於4 2 冰箱內,使紅細胞自然下沉1 3d,或將血袋呈70 80 角立於冰箱,需用時,用一次性分漿器分出血漿,制得濃縮紅細胞。2 洗滌法 一般用生理鹽水反覆洗滌3 6次。經洗滌的紅細胞,除白細胞和血小板減少外,血漿蛋白也極少,紅細胞中殘存的血漿蛋白含量約為原總蛋白的1 ...

關於冷漠,關於愛情

我不知道為什麼今天又莫名其妙開始思考愛情這件事,隨之就解決了我一直無法面對冷漠這件事 被冷漠是我始終無法消化的一件事,每當遇見冷漠時,我總會覺得就像一團火把自己燒得面目全非,但對方卻毫無傷害。但我突然懂了,遇到冷漠時,體面的離開即可 在乎你的人一定會在你離開後,找到你跟你解釋為什麼 連解釋都來不及,...