1.Overflow

overflow為溢出（容器），當(dāng)內(nèi)容超出容器時只需添加overflow屬性值為hidden， 就可以把超出容器的部分隱藏起來；

如果內(nèi)容超出容器卻又不想其隱藏時可以將其屬性值設(shè)置為auto；

overflow：auto 屬性如果超出就出現(xiàn)滾動條，沒有超出則不出現(xiàn)滾動條這樣就可以出現(xiàn)滾動條，

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

原始效果：

添加overflow：hidden；屬性，效果：

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

2.添加overflow-x：hidden；overflow-y：auto屬性

屬性設(shè)為overflow-x：auto；overflow-y：hidden；與上圖效果正好相反，即滾動條側(cè)邊隱藏，會出現(xiàn)在底部。

2.overflow的常見屬性值

Overflow屬心常見的有四個：visible，hidden，auto和scroll；

visible為overflow 的默認(rèn)值，為超出顯示；

hidden為超出隱藏；

auto為自動，即超出會出現(xiàn)滾動條， 不超出就沒有滾動條；

scroll為內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

3.overflow的神奇用法

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

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

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

萬能清除法

overflow:hidden

clear:both

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

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

.sl{

    white-space:nowrap;/*不換行*/

    overflow:hidden;/*超出隱藏*/
    
    text-overflow:ellipsis;/*超出省略*/

    width:;

}

注意要設(shè)置寬度

以上就是詳解CSS3：overflow屬性的詳細(xì)內(nèi)容，更多關(guān)于CSS3 overflow屬性的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論