CSS Overflow 屬性

2020-12-11 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

CSS最新資訊

 > 

正文

CSS Overflow 屬性

根據CSS的盒模型概念,頁面中的每個元素,都是一個矩形的盒子。這些盒子的大小、位置和行為都可以用CSS來控制。對於行為,我的意思是當盒子內外的內容改變的時候,它如何處理。比如,如果你沒有設置一個盒子的高度,該盒子的高度將會根據它容納內容的需要而增長。但是當你給一個盒子指定了一個高度或寬度而裡面的內容超出的時候會發生什麼?這就是該添加CSS的overflow屬性的時候了,它允許你設定該種情況下如何處理。

overflow屬性有四個值:visible (默認), hidden, scroll, 和auto。同樣有兩個overflow的姐妹屬性overflow-y 和overflow-x,它們很少被採用。

讓我們分別看一下這幾個值,並討論一寫共同用法和技巧。

Visible

如果你不設置overflow屬性,則默認的overflow屬性值就是visible。所以一般而言,並沒有什麼理由特別的設定overflow的屬性為visible除非你想覆蓋它在其它地方被設定的值。

這裡需要記住的重要的事情是,儘管盒子外面的內容是可見的,內容並不會影響頁面的工作流。比如:

一般來說,你至少不用為裡面的內容為文字的盒子設置固定的高度,這樣就不會遇到這種情況了。

Hidden

默認值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。

這對應付使用動態的內容,而且可能會由於內容溢出而引起一些布局上的問題的確很有用。儘管如此,請記住用此方法隱藏的內容將徹底的看不到(除非去查看原始碼)。 比如有的用戶設置他們的瀏覽器的默認字體比你預期的要大些,你會將一些文字推到盒子的外面然後完全的隱藏之……

Scroll

設置一個盒子的overflow值為scroll將會隱藏掉渲染到盒子之外的內容,但是它將會提供一個滾動條在盒子內部滾動,從而可以查看剩下的內容。

值得注意的是,使用scroll將會同時產生水平和垂直兩個滾動條,就算內容只需要其中一個。

Auto

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

清除浮動

設置overflow的一個更流行的用處是,說也奇怪,清除浮動。設置overflow並不會在該元素上清除浮動,它將清除自己(self-clear)。意思就是,應用了overflow(auto或hidden)的元素,將會擴展到它需要的大小以包圍它裡面的浮動的子元素(而不是疊了起來(collapsing)),假設未定義高度。就像這樣:

對於此問題,經過測試,IE6會自動擴展父層元素的高度,而IE8和FF等瀏覽器加上overflow:auto後,即可清除浮動。——神飛

這裡有更多關於浮動的細節文章關於浮動的一切。

跨瀏覽器的煩惱

就像CSS中的很多東東,overflow有很多的跨瀏覽器的蹊蹺的事情。比如這些:

滾動條在盒子裡面還是外面?

Firefox將其放到盒子外面,而IE則將其放到裡面。我認為只有IE是對的(它應該在裡面的)。

看清楚這個明顯的不同。

IE 8 擴展盒子的bug

IE8有很多有趣的新bug,包括一些非常嚴重的隱藏在網頁中的。這裡有更多的關於IE8的overflow的bug的介紹。

破壞浮動布局

IE 6, 7 和 8都會扭曲默認的overflow visible值並將水平的擴展一個盒子一匹配內容(比如圖片)。 這對使用浮動列布局的結構非常痛苦,而且單個擴展的列就能夠將其它列擠下去並使布局亂掉!

事實上,這個我在驗證的時候發現,只有IE6才會出現這種情況,而IE7、IE8和其它瀏覽器表現一致。如果大家在使用IE7或IE8時有遇到這種情況,請告訴我,多謝!——神飛

滾動條能用CSS控制嗎?

IE過去在較老的版本中允許這樣,但是之後就收斂了。比如許多表單元素,滾動條就不允許使用CSS控制。我在它是否是件好事情上沒有任何具體的意見,但是我可以說,在網站的所有內容上使用滾動條是很醜陋的和俗氣的。如果你需要一個美化的滾動條,你或許需要尋找JavaScript來模擬。

IE 技巧

無論是否需要,IE都會一直顯示一個垂直的滾動條,這對預防水平跳動是有些作用的,但並非總是可取的。要想在IE中移除它,可以在body元素中設置overflow為auto。PS:此種情況也較少發現,不過在body的樣式中添加overflow:auto的方法,建議考慮採用——神飛

演示

本文的演示頁面,可以查看這個頁面。

相關焦點

  • CSS overflow溢出屬性
    CSS overflow溢出屬性 本文向大家簡單介紹一下CSS overflow 溢出屬性的用法,overflow 屬性規定當內容溢出元素框時發生的事情,它定義溢出元素內容區的內容會如何處理。
  • 全面闡述overflow:hidden屬性
    這個時候我不理解了,我搜索了很多的資料,但是都沒能理解這是為什麼,直到看到別人在類似的情況下給wai這個div加了一個overflow:hidden這個屬性解決了這個問題。我們直到overflow:hidden這個屬性的作用是隱藏溢出,給wai加上這個屬性後,我們的nei的寬高自動的被隱藏掉了。
  • CSS樣式--字體屬性和文本屬性
    font字體屬性css樣式中,字體屬性有以下幾種:p{    font-size:50px; /*字體大小*/    line-height: 30px; /*行高*/,字號、行高、字體這三個屬性是最常見的。
  • CSS 中 關於 Overflow ,你需要了解的這些知識點!
    該元素的屬性是overflow,它是overflow-x和overflow-y屬性的簡寫形式。在本文中,將會介紹這些屬性,然後我們將一起深入討論與overflow相關的一些概念和用例。你準備好了嗎?get it!
  • 【第 231 期】CSS 中 關於 Overflow ,你需要了解的這些知識點!
    該元素的屬性是overflow,它是overflow-x和overflow-y屬性的簡寫形式。在本文中,將會介紹這些屬性,然後我們將一起深入討論與overflow相關的一些概念和用例。你準備好了嗎?get it!
  • css3必須了解的知識 css中常見的樣式屬性和值
    繼續上一篇文章的繼續了解css的基礎知識 全棧學習筆記,不同平臺不同的我!css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性滾動條滾動條設置/*滾動條*/.overflow{ overflow:scroll;/*屬性規定當內容溢出元素框時發生的事情。
  • CSS教程:認真學習haslayout
    要想更好的理解 css, 尤其是 IE 下對 css 的渲染,haslayout 是一個非常有必要徹底弄清除的概念。大多IE下的顯示錯誤,就是源於 haslayout。什麼是 haslayout ?
  • CSS 中 display,visiblity及 overflow 的作用和區別
    很多人在使用 CSS 時,對 Display, Visibility 和 Overflow 三個屬性的理解並不是很清晰,這裡就對這三個屬性做一下分析,對應三個屬性在使用時的區別.Displaydisplay 用來設置或檢索對象是否及如何顯示。
  • 詳細學習CSS中的網頁布局的屬性
    direction屬性:direction屬性決定BOX的排列方向,詳見屬性:屬性名稱: 'direction'屬性值: ltr| rtl初始值: ltr適合對象: 所有元素是否繼承: yes百分比備註: 被禁止float和clear屬性:在HTML中圖片可以選擇飄浮的位置
  • CSS樣式全部屬性和難記憶點(歸納)
    有一些CSS的冷門樣式太多了,但是又想記住,可以看這篇文章,這篇文章包括了一些css需要記憶的一些屬性,不包括平時經常使用的(相信你已經接觸的太多了)偽類選擇器偽類作用:link未訪問:visited已訪問:hover滑鼠移動到連結上:active選定的連結文字陰影
  • 這五個有用的 CSS 屬性完全被我忽視了
    以下為譯文:今天,我想在這裡和大家分享一些我很晚時候才知道的一些CSS屬性,在此之前,沒有人告訴我這些屬性的存在。使用屬性user-select,並且將它的值設置為none,我們可以將一個元素的文本設置為不能被用戶選中。
  • 【教程】html+css零基礎入門教程(十)
    CSS文本 - text-overflow 屬性text-overflow 屬性規定當文本溢出包含元素時發生的事情。text-overflow屬性有3種值的方式:1) clip修剪文本。如:p{text-overflow:string;}頁面上顯示為 F2E.TMING提示:一般與不換行white-space:nowrap;連用。CSS文本 - vertical-align 屬性vertical-align 屬性設置元素的垂直對齊方式。
  • 前端進階:css必知的幾個底層知識和技巧
    在介紹完問題學習法之後,進入我們今天的主題,接下來我會介紹css的一些底層的知識的現象,藉此來讓大家對css有更深入的理解。2.對於img元素,如果有css尺寸,則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)3.當圖片的src屬性預設時,圖片不會有任何請求,是最高效的實現方式,如下展示的是使用此方式的圖片佔位代碼(對於firefox瀏覽器,src預設的img是一個普通的內聯元素,寬高設置無效):
  • CSS沒那麼難,入門篇(一)
    white-space屬性,值nowrap可以規定文本不換行。追加white-space: nowrap;屬性,顯示效果文本確實沒有換行,但超出元素的部分沒有被隱藏,會影響其他元素的展示,這裡可以使用overflow屬性。
  • 面試題聯盟之CSS篇
    預處理器(sass/less/stylus/postcss)這些都是類css語言,通過webpack編譯可以轉成瀏覽器可讀的css,並且賦予css更強大的功能。給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性。
  • 前端進階: css必知的幾個底層知識和技巧
    在介紹完問題學習法之後,進入我們今天的主題,接下來我會介紹css的一些底層的知識和比較詭異的現象,藉此來讓大家對css有更深入的理解。一.css尺寸1.首選最小寬度–實現複雜圖形效果在css中,圖片和文字的權重遠大於布局,因此當width:0時表現出來的寬度就是「首選最小寬度」。中文的最小寬度為每個漢字的寬度,西方文字取決於連續的英文字符單元。
  • css flex屬性筆記
    flex屬性定義及用法在css中,flex屬性是使用來設置或檢索彈性盒模型對象的子元素如何分配空間,是 flex-grow屬性、flex-shrink屬性和 flex-basis 屬性的簡寫屬性。flex屬性針對的是彈性盒模型對象的子元素,對於其它元素,flex屬性不起任何作用;一些主流瀏覽器還不支持flex屬性,需要在該屬性之前加對應的前綴才能識別該屬性。Internet Explorer 9及更早版本不支持flex屬性,但是可以通過-ms-flex屬性來支持, IE11 及更新版本完全支持flex屬性,不再需要-ms-前綴。
  • CSS固定定位{position:fixed}
    這就是通過CSS的定位屬性{position:fixed}來實現的,通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。IE7、Firefox、Opera,都支持CSS的{position:fixed},所以很容易實現(《詳解定位與定位應用》) IE6不支持該屬性,但是在使用!
  • CSS margin屬性與用法教程
    margin 屬性是css用於在一個聲明中設置所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離
  • 工作中常用的css整理
    文字超出部分顯示省略號單行文本的溢出顯示省略號(一定要有寬度) p{    width:200rpx;    overflow: hidden;    text-overflow:ellipsis;    white-space: nowrap; }多行文本溢出顯示省略號