Css中overflow屬性的認識

2021-07-09 23:49:12 字數 837 閱讀 4712

overflow:溢位;   hidden:隱藏。

這個css屬性,用於將溢位到盒子border外的內容隱藏。

案例1:

對溢位要做處理:

新增:overflow:hidden

再看乙個案例:

直觀上看,這個屬性對網頁設計人員來說真是福音!比如乙個盒子內部有乙個比自己還寬的子盒子,這時候就會影響自己的表現。只需要給自己加上overflow:hidden即可。(當盒子掉下來了,不知道怎麼哪兒溢位了,可以給父盒子加overflow:hidden;)

這個屬性還可以用來做什麼呢?

overflow:hidden可以用來清除浮動

首先overflow:hidden可以清除浮動對後面元素的影響。

接下來為:man新增樣式

如何解決ie6中的相容性問題呢?很簡單,只需要再新增乙個伴生屬性:zoom:1,就可以了。

zoom是ie瀏覽器中的乙個屬性(不是w3c的屬性),用於控制顯示倍數。這個屬性用於控制頁面中的任何元素顯示倍數的,這個屬性非常干擾前端開發工程師的工作,微軟在ie9中砍掉了這個屬性!【相容性問題】也就是說用overflow:hidden來清除浮動,對ie6有相容性問題。

在有haslayout機制的情況下,ie瀏覽器可以用overflow:hidden,_zoom:1來清除浮動的影響。

小結:

overflow:hidden 作用:

1、可以隱藏超出自己(border部分)的內容。

2、可以清除浮動,但要注意ie6的相容性問題,要同時新增乙個伴生屬性_zoon:1。

CSS中的overflow屬性

如果元素中的內容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示滾動條,是否隱藏溢位部分等行為,規定當內容溢位元素框時發生的事情。visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會...

CSS學習 overflow屬性

在網頁布局中,未處理的溢位元素絕對算得上是個 毒瘤 因為如果乙個 盒子 周圍還有其它元素,而從這個盒子中溢位的元素會和盒子周圍的元素發生層疊,並脫離了整個html元素,所以我們應當合理使用css中的overflow屬性來處理溢位的元素。doctype html html lang en head m...

Css中overflow屬性的相關介紹

overflow css屬性 overflow 為css中設定當物件的內容超過其指定高度及寬度時如何管理內容的屬性。初始值 visible 適用於 block level and replaced elements 繼承性 無百分比 n a visual 版本 css2 相容性 ie4 ns6 ov...