CSS 中關于 Overflow，你需要了解的這些知識點

CSS中，當一個元素的內容太大而無法容納時，我們可以對其進行控制。該元素的屬性是overflow，它是overflow-x和overflow-y屬性的簡寫形式。

在本文中，將會介紹這些屬性，然后我們將一起深入討論與overflow相關的一些概念和用例。你準備好了嗎？get it!

簡介

要使用overflow屬性，我們需要確保將其應用到的元素具有以下特征：

塊級元素(例如:div、section)，通過height或max-height設置高度。通過設置高度，我的意思是項目應該有內容(不是空的)，也不是添加一個顯式的高度。
或將white-space設置為nowrap 的元素

Overflow 有哪些值

overflow屬性可以有如下屬性：

?
visible, hidden, scroll, auto
?

.element {
    height: 200px;
    overflow: [overflow-x] [overflow-y];
}

由于overflow是一種簡寫屬性，因此它可以接受一個或兩個值。第一個值用于水平軸，第二個值用于垂直軸。

Visible

overflow 默認值為 visible，其中的內容可以超出其父值。可以這樣設置:

.element {
    height: 200px;
    overflow: visible;
}

有趣的一面是，當一個軸設置為visible，而另一軸設置為auto時，visible的軸將計算為auto。

[MDN][2] 上這樣說到：

?
注意: 設置一個軸為visible（默認值），同時設置另一個軸為不同的值，會導致設置visible的軸的行為會變成auto`。
?

例如，如果我們用以下內容設置一個元素:

.element {
    height: 200px;
    overflow: visible auto;
}

overflow屬性的計算值將為auto auto。

Hidden

當內容比其父內容長時，它將被剪切。但是，可以使用 Javascript 滾動內容。

Scroll

在上圖中，無論內容是否長，滾動條總是可見的。注意，這取決于操作系統。

Auto

auto這是一個聰明的關鍵字，僅當內容比其容器長時才顯示滾動條。

注意，在圖中，只有當內容比其容器長時，滾動條才可見。接下來，我們將討論與overflow相關的longhand屬性

Overflow-X

該家伙負責x軸或元素的水平邊。

Overflow-Y

該家伙負責y軸或元素的垂直邊。

用例和事例

簡單滑塊

我們可以通過水平裁剪內容并使其滾動來創建快速簡單的滑塊。

在上面的模型中，我們有水平放置的卡片，還有一個滾動條，可以滾動并顯示更多內容。為此，我們需要執行以下操作：

將卡片顯示在同一行，為此使用flexbox
向容器中添加overflow-x

.wrapper {
    display: flex;
    overflow-x: auto;
}

它可以在桌面瀏覽器上工作。然而，在Safari上對iOS(12.4.1)進行測試時，滾動并沒有起作用。經過反復試驗，當我為子項添加寬度時，滾動起作用了，在iOS(13.3)上運行就沒有問題啦。

事例源碼：https://codepen.io/shadeed/pen/bfb886326f2066b6ae0a8b641ecf68b4?editors=1100

模態框內容

當模態內容太長時，我們可以很容易地使區域可滾動。要做到這一點，我們應該做到以下幾點

設置模態框的最大高度
模態框 body 應占用全部可用空間

.modal {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    max-width: 450px;
}

/* 1. 讓模態框 body 占據剩余的可用空間 */
/* 2. 如果內容很長，則允許滾動。我使用`auto`是因為它在內容足夠長之前不會顯示滾動條 */
.modal__content {
    flex-grow: 1; /* [1] */
    overflow-y: auto; /* [1] */
}

事例源碼：https://codepen.io/shadeed/pen/1997908941279f0af3d6c7f83d6efdc8?editors=0100

帶有圓角的卡片

當我們有一張卡并且希望其角是圓的時，我們傾向于為頂部和底部的角添加border-radius，如下所示：

.card-image {
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

.card-content {
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

這可能需要很多工作，特別是如果卡片在移動設備上具有不同的設計。例如，它們不會彼此堆疊，而不是堆疊其子項。

在這種情況下，最好使overflow: hidden將其隱藏在包裝器上，然后向其添加border-radius，這樣我們只需要設置一個地方就行了。如下所示：

.card {
    overflow: hidden;
    border-radius: 7px;
}

動畫

當涉及動畫時，overflow: hidden的好處是：在剪輯時可以懸停顯示的隱藏元素上。考慮下圖：

在CSS中，如下所示：

.button.slide-left {
    overflow: hidden;
}

.button.slide-left:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.25;
    border-radius: 100px;
    transform: translateX(-100%);
    transition: 0.2s ease-in;
}

我們有兩個按鈕，每個按鈕都有一個偽元素，該元素相應地過渡到左側和底部。如下所示：

事例源碼：https://codepen.io/shadeed/pen/7b48418837470e173f7a6cd7bcc4a403?editors=0100

Overflow的常見問題：在手機上滾動

例如，當我們有一個滑動條時，僅僅添加overflow-x是不夠的。在「Chrome iOS」上，我們需要手動滾動和移動內容。看下面的動圖：

幸運的是，有一個屬性可以增強滾動體驗。

.wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

這稱為「基于動量的滾動」。根據MDN：

「-webkit-overflow-scrolling」 屬性控制元素在移動設備上是否使用滾動回彈效果。它有兩個值：

「auto」：使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。「touch」：使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

下圖是使用基于動量的滾動的效果。

內聯塊元素

根據CSS規范：

?
將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈在同一行內，允許空格。(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度塊元素的屬性)
?

當一個inline-block元素的overflow值不是visible的時，這將導致該元素的底邊根據其同級元素的文本基線對齊。

要解決該問題，我們可以主按鈕添加overflow: hidden，并更改其對齊方式：

.button {
    vertical-align: top;
}

事例源碼：https://codepen.io/shadeed/pen/291fda2293ed737f7eb7dc74a9318438?editors=1100

水平滾動問題

通常，我們會遇到水平滾動的問題，當原因未知時，滾動滾動會變得更加困難。在本節中，我將列出水平滾動的一些常見原因，以便大家以后在構建布局時可以想到到它們。

position 是 absolutely/fixed 元素

當元素的position值為absolute或fixed值時，就有可能導致水平滾動。當left，right值中的一個將元素定位在body元素外部時，可能會發生這種情況

要解決這個問題，首先需要檢查為什么這個元素被放置在viewport之外。如果沒有必要，則必須刪除它或編輯position值。

grid 項目

CSS 網格有三種情況可以導致水平滾動，來看看它們。

「對列使用像素值」

當使用像素值時，這將在視口寬度較小時引起問題。見下文：

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1rem;
}

解決方案是重置列，只在有足夠空間的視口上使用上面的列。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: 200px 1fr;
}

使用 minmax()

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
}

可能會遺忘要針對移動設備進行測試，因為最小寬度為300px，這將導致在某個點進行水平滾動。

一個簡單的解決方法是將grid-template-columns重置為1fr，并在視口較大時對其進行更改。

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 400px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

源碼地址：https://codepen.io/shadeed/pen/a874bf85a1acf2ee6f37a7f1d86ad3b2?editors=1100

長詞或鏈接

處理內容中的長字或鏈接時，它應該換行，否則，將會出現水平滾動。

為了解決這個問題，我們需要中斷長單詞和鏈接。我們可以這樣做

.post-content a {
    word-wrap: break-word;
}

或者我們可以使用text-overflow：

.post-content a {
    overflow: hidden;
    text-overflow: ellipsis;
}

如何調試水平滾動問題

既然我們已經知道了水平滾動的原因，我將介紹一些方法來幫助我們識別這些問題并解決它們。

使用 CSS outline

*, *:before, *:after {
    outline: solid 1px #000;
}

通過添加這些內容，我們可以注意到哪些元素的寬度較大，因此我們可以解決問題。阿迪·奧斯曼尼（Addy Osmani）用他的簡單腳本進一步完善了這一點：

[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

該腳本的作用是使輪廓顏色隨機化，而不是使所有輪廓都具有單一顏色，這將使其變得更容易。

Firefox scroll標簽

在Firefox中，會向導致水平滾動的元素添加一個小標簽。

刪除元素

有時，上述技術無效。在這種情況下，我要做的是打開DevTools，然后開始刪除元素并注意。一旦水平滾動消失了，我就可以確定引起問題的元素。

最后一個解決方案:使用overflow-x: hidden

最后，可以使用overflow-x：hidden解決水平滾動問題，但這一般是最后沒辦法的備用方案。

作者：Ahmad shaded 譯者：前端小智來源：sitepoint

原文：https://ishadeorddeed.com/article/overflow-css/

多人在使用 CSS 時,對 Display, Visibility 和 Overflow 三個屬性的理解并不是很清晰,這里就對這三個屬性做一下分析,對應三個屬性在使用時的區別.

Display

display 用來設置或檢索對象是否及如何顯示。

display: none

display 屬性為 none 時,隱藏標簽對象。不會為對象保留其位置空間,它下面所在的元素會被自動上移占有被隱藏標簽位置。

HTML 代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
    display: none;
}
#c{
    background-color: blue;
}

效果如下:

display: block

display 屬性為 block 時,默認有顯示標簽的意義,同時可以將標簽轉換為塊元素顯示,這時標簽會獨占一行,并且可以設置寬高屬性。

HTML 代碼:

<span id="a">A</span>
<span id="b">B</span>
<span id="c">C</span>

CSS代碼:

span{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
}
#c{
    background-color: blue;
    display: block;
}

效果如下:

display: inline

display 屬性為 inline 時,指定對象為內聯元素,此時對象的寬高屬性不在有效,元素大小取決于實際內容大小。

HTML 代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
    display: inline;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
}
#c{
    background-color: blue;
}

效果如下:

Visibility

visibility 屬性用來設置或檢索是否顯示對象。與 display 屬性不同，該屬性為隱藏的對象保留其占據的物理空間, 該屬性默認值為 visible, 設置對象可見。

visibility: hidden

visibility 屬性為 hidden 時,隱藏標簽對象。但該對象所占用的位置空間會被保留。

HTML代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
    visibility: hidden;
}
#c{
    background-color: blue;
}

效果如下:

Overflow

overflow 屬性用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

overflow: visible

overflow 默認值為 visible, 作用是按實際效果顯示 ,不剪切超出范圍的內容。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: visible;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: hidden

overflow 值為 hidden時,會將超出對象尺寸的內容進行裁剪，將不出現滾動條。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: scroll

overflow 值為 scroll, 作用是將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow:  scroll;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: auto

overflow 值為 auto時, 作用是在需要時剪切內容并添加滾動條，該值為body對象和textarea的默認值。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: auto;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

總結:

display 和 visibility 屬性都是用來設置或檢索對象是否及如何顯示。
使用diplay 隱藏對象時,在文檔流中不占空間.后續對象會占據隱藏對象位置。
使用 visibility 隱藏對象時,在文檔流中會保留隱藏對象所占用的空間。
overflow 主要用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容顯示。

海無涯，不要沉浸在知識的海洋里，迷失自己。

要知道自己想要什么，抓住重點，不忘初心。

這個世界上百分之20的人，掌握著百分之80的財富。

接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。

往期知識點回顧：

重點屬性-display

重點屬性-position

重點屬性-float

重點屬性-flex

重點屬性-media

重點屬性-background

一、重點屬性-overflow

overflow

屬性指定如果內容溢出一個元素的框，會發生什么。

visible

默認值。內容不會被修剪，會呈現在元素框之外。

hidden

內容會被修剪，并且其余內容是不可見的。

scroll

內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

auto

如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。

二、實踐案例

如何使用滾動條來顯示元素內溢出的內容

div{
background-color:#ff9900;
width:150px;
height:150px;
overflow: scroll;
}
復制代碼

如何隱藏溢出元素中溢出的內容

div{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
復制代碼

三、面試題

浮動是如何產生的？

一般浮動是什么情況呢？一般是一個盒子div里使用了CSS float浮動屬性，導致父級對象盒子不能被撐開，這樣CSS float浮動就產生了。

浮動會產生什么副作用？

1、背景不能顯示

由于浮動產生，如果對父級設置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。

2、邊框不能撐開

如上圖中，如果父級設置了CSS邊框屬性（css border），由于子級里使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。

3、margin padding設置值不能正確顯示

由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

如何清除浮動

1、對父級設置適合CSS高度

2、clear:both清除浮動

為了統一樣式，我們新建一個樣式選擇器CSS命名為“.clear”，并且對應選擇器樣式為“clear:both”，然后我們在父級“”結束前加此div引入“class="clear"”樣式。這樣即可清除浮動。

3、父級div定義 overflow:hidden

對父級CSS選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少CSS代碼即可解決浮動產生。

在線咨詢

上一篇：Web前端教程：HTML塊級、行級元素，特殊字符，嵌套規則
下一篇：java-web中jsp的理解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 中 關于 Overflow，你需要了解的這些知識點

簡介

Overflow 有哪些值

Visible

Hidden

Scroll

Auto

Overflow-X

Overflow-Y

用例和事例

簡單滑塊

模態框內容

帶有圓角的卡片

動畫

Overflow的常見問題：在手機上滾動

內聯塊元素

水平滾動問題

position 是 absolutely/fixed 元素

grid 項目

使用 minmax()

長詞或鏈接

如何調試水平滾動問題

使用 CSS outline

Firefox scroll標簽

刪除元素

最后一個解決方案:使用overflow-x: hidden

Visibility

Overflow

一、重點屬性-overflow

overflow

visible

hidden

scroll

auto

inherit

二、實踐案例

三、面試題

浮動是如何產生的？

浮動會產生什么副作用？

如何清除浮動

您的項目需求

CSS 中關于 Overflow，你需要了解的這些知識點