CSSoverflow屬性用法簡介

大家知道CSSoverflow屬性用法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

CSS之overflow屬性有四個值：visible (默認), hidden, scroll, 和auto。同樣有兩個overflow的姐妹屬性overflow-y 和overflow-x，它們很少被采用。讓我們分別看一下這幾個值，並討論一寫共同用法和技巧。

Auto

overflow的auto值很像scroll，它唯一解決的是在你不需要的時候也會出現滾動條的問題。

Hidden

默認值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。這對應付使用動態的內容，而且可能會由於內容溢出而引起一些布局上的問題的確很有用。盡管如此，請記住用此方法隱藏的內容將徹底的看不到(除非去查看源代碼)。 比如有的用戶設置他們的浏覽器的默認字體比你預期的要大些，你會將一些文字推到盒子的外面然後完全的隱藏之……

Visible

如果你不設置overflow屬性，則默認的overflow屬性值就是visible。所以一般而言，並沒有什麼理由特別的設定overflow的屬性為visible除非你想覆蓋它在其它地方被設定的值。這裡需要記住的重要的事情是，盡管盒子外面的內容是可見的，內容並不會影響頁面的工作流。一般來說，你至少不用為裡面的內容為文字的盒子設置固定的高度，這樣就不會遇到這種情況了。

Scroll

設置一個盒子的overflow值為scroll將會隱藏掉渲染到盒子之外的內容，但是它將會提供一個滾動條在盒子內部滾動，從而可以查看剩下的內容。值得注意的是，使用scroll將會同時產生水平和垂直兩個滾動條，就算內容只需要其中一個。

相信大家已經學會CSSoverflow屬性用法了吧!感謝大家對我們網站的支持!

相關推薦：

cssDimension屬性簡介