根據CSS的盒子模型概念,頁面中的每個元素,都是一個矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來控制。對於行為,我的意思是當盒子內外的內容改變的時候,它如何處理。例如,如果你沒有設定一個盒子的高度,該盒子的高度將會根據它容納內容的需要而成長。但是當你給一個盒子指定了一個高度或寬度而裡面的內容超出的時候會發生什麼?這就是該添加CSS的overflow屬性的時候了,它允許你設定該種情況下如何處理。
overflow屬性有四個值: visible (預設), hidden, scroll, 和auto 。同樣有兩個overflow的姊妹屬性overflow-y 和overflow-x,它們很少被採用。
讓我們分別看一下這幾個數值,並討論一寫共同用法和技巧。
Visible
如果你不設定overflow屬性,預設的overflow屬性值就是visible。所以一般而言,並沒有什麼理由特別的設定overflow的屬性為visible除非你想覆蓋它在其它地方被設定的值。
這裡要記住的重要的事情是,儘管盒子外面的內容是可見的,內容並不會影響頁面的工作流程。比如:
一般來說,你至少不用為裡面的內容為文字的盒子設定固定的高度,這樣就不會遇到這種情況了。
Hidden
預設值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。
這對應付使用動態的內容,而且可能會由於內容溢出而引起一些佈局上的問題的確很有用。儘管如此,請記住用此方法隱藏的內容將徹底的看不到(除非去查看原始程式碼)。 例如有的用戶設定他們的瀏覽器的預設字體比你預期的要大些,你會將一些文字推到盒子的外面然後完全的隱藏之…