overflow屬性(CSS3:overflow屬性是什么/怎么用)

1.Overflow

overflow為溢出(容器),當內容超出容器時只需添加overflow屬性值為hidden, 就可以把超出容器的部分隱藏起來;

如果內容超出容器卻又不想其隱藏時可以將其屬性值設置為auto;

overflow:auto 屬性如果超出就出現滾動條,沒有超出則不出現滾動條這樣就可以出現滾動條,

滾動條也可以單獨設置,例如overflow-x:hidden;overflow-y:auto;這樣就只能看見垂直方向的滾動條了。如果單獨定義x軸或者y軸的時候,兩個屬性都需設置屬性值。

原始效果:

添加overflow:hidden;屬性,效果:

可以看到,overflow:hidden會把超出盒子的部分隱藏,也可以理解為切斷。

2.添加overflow-x:hidden;overflow-y:auto屬性

屬性設為overflow-x:auto;overflow-y:hidden;與上圖效果正好相反,即滾動條側邊隱藏,會出現在底部。

2.overflow的常見屬性值

Overflow屬心常見的有四個:visible,hidden,auto和scroll;

visible為overflow 的默認值,為超出顯示;

hidden為超出隱藏;

auto為自動,即超出會出現滾動條, 不超出就沒有滾動條;

scroll為內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。

3.overflow的神奇用法

第一種用法:解決margin-top的傳遞問題

margin-top的傳遞問題:子元素的margin-top會把父元素一起帶下來,給父元素加overflow:hidden即可解決

第二種用法:清除浮動帶來的影響 --- 父元素高度塌陷

萬能清除法

overflow:hidden

clear:both

第三種用法:顯隱動畫 --- 超出隱藏

第四種用法:單行文本超出省略

.sl{white-space:nowrap;/*不換行*/overflow:hidden;/*超出隱藏*/text-overflow:ellipsis;/*超出省略*/width:;}

注意要設置寬度

到此,相信大家對“CSS3:overflow屬性是什么/怎么用”有了更深的了解,不妨來實際操作一番吧!這里是本站網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!