詳細講解CSS Overflow屬性

2020-03-24 19:11:28

字體：大中小

來源：轉載

供稿：網友

建站學CSS基礎教程，本文我們將詳解CSS Overflow屬性。檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
所有對象的默認值是 visible ，除了 textarea 對象和 body 對象的默認值是 auto 。設置 textarea 對象此屬性值為 hidden 將隱藏其滾動條。overflow屬性有四個值：visible (默認), hidden, scroll, 和auto。同樣有兩個overflow的姐妹屬性overflow-y 和overflow-x，它們很少被采用。Visible如果你不設置overflow屬性，則默認的overflow屬性值就是visible。所以一般而言，并沒有什么理由特別的設定overflow的屬性為visible除非你想覆蓋它在其它地方被設定的值。這里需要記住的重要的事情是，盡管盒子外面的內容是可見的，內容并不會影響頁面的工作流。比如：一般來說，你至少不用為里面的內容為文字的盒子設置固定的高度，這樣就不會遇到這種情況了。Hidden默認值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。這對應付使用動態的內容，而且可能會由于內容溢出而引起一些布局上的問題的確很有用。盡管如此，請記住用此方法隱藏的內容將徹底的看不到(除非去查看源代碼)。比如有的用戶設置他們的瀏覽器的默認字體比你預期的要大些，你會將一些文字推到盒子的外面然后完全的隱藏之 hellip;…Scroll設置一個盒子的overflow值為scroll將會隱藏掉渲染到盒子之外的內容，但是它將會提供一個滾動條在盒子內部滾動，從而可以查看剩下的內容。值得注意的是，使用scroll將會同時產生水平和垂直兩個滾動條，就算內容只需要其中一個。overflow的auto值很像scroll，它唯一解決的是在你不需要的時候也會出現滾動條的問題。設置overflow的一個更流行的用處是，說也奇怪，清除浮動。設置overflow并不會在該元素上清除浮動，它將清除自己(self-clear)。意思就是，應用了overflow(auto或hidden)的元素，將會擴展到它需要的大小以包圍它里面的浮動的子元素(而不是疊了起來(collapsing))，假設未定義高度。就像這樣：這里有更多關于浮動的細節文章關于浮動的一切。跨瀏覽器的煩惱就像CSS中的很多東東，overflow有很多的跨瀏覽器的蹊蹺的事情。比如這些：滾動條在盒子里面還是外面?firefox將其放到盒子外面，而IE則將其放到里面。我認為只有IE是對的(它應該在里面的)。

看清楚這個明顯的不同。IE 8 擴展盒子的bugIE8有很多有趣的新bug，包括一些非常嚴重的隱藏在網頁中的。破壞浮動布局IE 6, 7 和 8都會扭曲默認的overflow visible值并將水平的擴展一個盒子一匹配內容(比如圖片)。這對使用浮動列布局的結構非常痛苦，而且單個擴展的列就能夠將其它列擠下去并使布局亂掉！滾動條能用CSS控制嗎？IE過去在較老的版本中允許這樣，但是之后就收斂了。比如許多表單元素，滾動條就不允許使用CSS控制。我在它是否是件好事情上沒有任何具體的意見，但是我可以說，在網站的所有內容上使用滾動條是很丑陋的和俗氣的。如果你需要一個美化的滾動條，你或許需要尋找javascript來模擬。IE 技巧無論是否需要，IE都會一直顯示一個垂直的滾動條，這對預防水平跳動是有些作用的，但并非總是可取的。要想在IE中移除它，可以在body元素中設置overflow為autohtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：總結8個關于html、css鏈接樣式的實例代碼

下一篇：css 、jquery實現3d立體旋轉