本篇內容主要講解“CSS3：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屬性是什么/怎么用”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

分享名稱：CSS3：overflow屬性是什么/怎么用
本文URL：http://vcdvsql.cn/article46/pepihg.html

成都網站建設公司_創新互聯，為您提供App開發、企業網站制作、網頁設計公司、網站策劃、商城網站、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯