overflow為溢位(容器),當內容超出容器時只需新增overflow屬性值為hidden, 就可以把超出容器的部分隱藏起來;
如果內容超出容器卻又不想其隱藏時可以將其屬性值設定為auto;
overflow:auto 屬性如果超出就出現滾動條,沒有超出則不出現滾動條這樣就可以出現滾動條,
滾動條也可以單獨設定,例如overflow-x:hidden;overflow-y:auto;
這樣就只能看見垂直方向的滾動條了。如果單獨定義x軸或者y軸的時候,兩個屬性都需設定屬性值。
原始效果:
1.新增overflow:hidden;屬性,效果:
可以看到,overflow:hidden會把超出盒子的部分隱藏,也可以理解為切斷。
2.新增overflow-x:hidden;overflow-y:auto屬性
屬性設為overflow-x:auto;overflow-y:hidden;與上圖效果正好相反,即滾動條側邊隱藏,會出現在底部。
overflow屬心常見的有四個:visible,hidden,auto和scroll;
visible為overflow 的預設值,為超出顯示;
hidden為超出隱藏;
auto為自動,即超出會出現滾動條, 不超出就沒有滾動條;
scroll為內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。
第一種用法:解決margin-top的傳遞問題
margin-top的傳遞問題:子元素的margin-top會把父元素一起帶下來,給父元素加overflow:hidden即可解決
第二種用法:清除浮動帶來的影響 --- 父元素高度塌陷
萬能清除法
overflow:hidden
clear:both
第三種用法:顯隱動畫 --- 超出隱藏
第四種用法:單行文字超出省略
.sl
注意要設定寬度
好啦,以上就是小譚今天要分享的內容啦,如果有什麼寫的不好的地方歡迎各位大佬指點一二,小譚不勝榮幸!啾咪~
CSS學習 overflow屬性
在網頁布局中,未處理的溢位元素絕對算得上是個 毒瘤 因為如果乙個 盒子 周圍還有其它元素,而從這個盒子中溢位的元素會和盒子周圍的元素發生層疊,並脫離了整個html元素,所以我們應當合理使用css中的overflow屬性來處理溢位的元素。doctype html html lang en head m...
CSS中的overflow屬性
如果元素中的內容超出了給定的寬度和高度屬性,overflow 屬性可以確定是否顯示滾動條,是否隱藏溢位部分等行為,規定當內容溢位元素框時發生的事情。visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會...
CSS3的border radius屬性詳解
除了上述的簡寫外,還可以和border一樣,分別寫四個角,如下 border top left radius 左上角 border top right radius 右上角 border bottom right radius 右下角 border bottom left radius 左下角 分別...