CSS中 overflow hidden 的作用

2021-07-11 07:16:45 字數 1435 閱讀 9562

本文**:

功能1、隱藏溢位

在ie6下,當子容器的寬高超出父容器時,父容器就會被撐開來。

要想解決這個問題,在父容器中除定義寬和高的值以外,還必須寫overflow:hidden,這樣就能把子容器的其它內容隱藏。

但是在火狐或者其他瀏覽器裡面,我們發現問題並非如此簡單。我們發現,當子容器這個div的寬度和高度都大於父容器這個div的時候,父容器並沒有被內撐開而是依舊顯示為我們指定的寬高。

例如:結構如下:

css**:

#wai

#nei

在ie6中顯示如下圖:

在ie7、ie8、ff中顯示如下圖:

但是如果我們在#wai中加上overflow:hidden; 顯示就會變化了,nei的寬高自動的被隱藏掉了。

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

功能2、消除浮動

當nei這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了wai這個div,也就是說,此時的nei的寬高是多少, 對於已經脫離了的wai來說,都是不起作用的。當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什麼意思了。也就是說,當我們給wai這個div加上overflow:hidden這個屬性的時候,其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了。

附上overlow的所有屬性:

overflow 屬性規定當內容溢位元素框時發生的事情。值描述

visible

預設值。內容不會被修剪,會呈現在元素框之外。

hidden

內容會被修剪,並且其餘內容是不可見的。

scroll

內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。

設定 overflow 屬性:

CSS 關於css中的border

曾經一直以為html中的border是直角的,直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式,如果這個角相鄰的兩個border乙個有定義而乙個無定義,那麼繪製的結果就是由粗到細的 小尾巴了...

CSS中引入CSS樣式的方法

html宣告標籤 定義和用法 宣告必須是html文件的第一行,位於標籤之前。宣告不是html標籤 他是指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令 在html4.0中,宣告引用dtd,因為html4.01基於sgml。dtd規定了標記語言的則 這樣瀏覽器才能正確的呈現內容。html5不...

css中強制換行

結構 1.transshipment booking system is launched只對英文起作用,以字母作為換行依據 2.transshipment booking system is launched只對英文起作用,以單詞作為換行依據 3.transshipment booking sys...