三 overflow 內容溢位容器時的處理方式

2021-10-08 09:45:56 字數 485 閱讀 1139

三.overflow 內容溢位容器時的處理方式

visible可見的 hidden隱藏 scroll出現滾動條 auto內容溢位才出現滾動條

設定某個方向:overflow-x 水平方向 overflow-y垂直方向

當某乙個方向的值不為visible,另乙個方向的值會自動設定為auto

備註:隱藏元素的兩種方式

1.display:none;隱藏元素,不佔位置

2.visibility:hidden;隱藏元素,佔位置

overflow的應用場景:

1.高度塌陷,子元素都浮動了,父元素會沒有高度。

清除高度塌陷:給父元素加overflow:hidden;

2.margin:給父元素的第乙個子元素加margin-top,會錯誤的渲染到父元素上

解決辦法:給父元素加overflow:hidden;

3. 自適應兩欄布局:某一邊定寬浮動時,另一邊不定寬overflow:hidden;

overflow溢位內容區的解釋

一 定義 overflow 屬性規定當內容溢位元素框時發生的事情。visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢...

CSS的內容溢位和剪裁 overflow

css的內容溢位和剪裁 overflow 為什麼要使用overflow html中經常會出現子元素的寬度或高度超過了 父元素的高度或寬度。頁面上的顯示內容就會超出 父元素的邊框。可以通過overflow進行控制處理。overflow介紹 滾動條樣式主要涉及到如下overflow屬性 overflow...

overflow屬性,此溢位非彼溢位

有四個值 visible 預設值 scroll,hidden和auto。scroll值能阻止內容溢位,但會增加出滾動條,通過拉動滾動條可以瀏覽所有內容。auto 如果內容溢位被限制,則會新增乙個滾動條,使超出的內容可以通過滾動展示出來。hidden 隱藏掉內容溢位的部分,溢位的內容將不可見。當文字超...