CSS 中關(guān)于 Overflow，你需要了解的這些知識(shí)點(diǎn)

CSS中，當(dāng)一個(gè)元素的內(nèi)容太大而無法容納時(shí)，我們可以對(duì)其進(jìn)行控制。該元素的屬性是overflow，它是overflow-x和overflow-y屬性的簡寫形式。

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

簡介

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

塊級(jí)元素(例如:div、section)，通過height或max-height設(shè)置高度。通過設(shè)置高度，我的意思是項(xiàng)目應(yīng)該有內(nèi)容(不是空的)，也不是添加一個(gè)顯式的高度。
或?qū)hite-space設(shè)置為nowrap 的元素

Overflow 有哪些值

overflow屬性可以有如下屬性：

?
visible, hidden, scroll, auto
?

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

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

Visible

overflow 默認(rèn)值為 visible，其中的內(nèi)容可以超出其父值。可以這樣設(shè)置:

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

有趣的一面是，當(dāng)一個(gè)軸設(shè)置為visible，而另一軸設(shè)置為auto時(shí)，visible的軸將計(jì)算為auto。

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

?
注意: 設(shè)置一個(gè)軸為visible（默認(rèn)值），同時(shí)設(shè)置另一個(gè)軸為不同的值，會(huì)導(dǎo)致設(shè)置visible的軸的行為會(huì)變成auto`。
?

例如，如果我們用以下內(nèi)容設(shè)置一個(gè)元素:

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

overflow屬性的計(jì)算值將為auto auto。

Hidden

當(dāng)內(nèi)容比其父內(nèi)容長時(shí)，它將被剪切。但是，可以使用 Javascript 滾動(dòng)內(nèi)容。

Scroll

在上圖中，無論內(nèi)容是否長，滾動(dòng)條總是可見的。注意，這取決于操作系統(tǒng)。

Auto

auto這是一個(gè)聰明的關(guān)鍵字，僅當(dāng)內(nèi)容比其容器長時(shí)才顯示滾動(dòng)條。

注意，在圖中，只有當(dāng)內(nèi)容比其容器長時(shí)，滾動(dòng)條才可見。接下來，我們將討論與overflow相關(guān)的longhand屬性

Overflow-X

該家伙負(fù)責(zé)x軸或元素的水平邊。

Overflow-Y

該家伙負(fù)責(zé)y軸或元素的垂直邊。

用例和事例

簡單滑塊

我們可以通過水平裁剪內(nèi)容并使其滾動(dòng)來創(chuàng)建快速簡單的滑塊。

在上面的模型中，我們有水平放置的卡片，還有一個(gè)滾動(dòng)條，可以滾動(dòng)并顯示更多內(nèi)容。為此，我們需要執(zhí)行以下操作：

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

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

它可以在桌面瀏覽器上工作。然而，在Safari上對(duì)iOS(12.4.1)進(jìn)行測試時(shí)，滾動(dòng)并沒有起作用。經(jīng)過反復(fù)試驗(yàn)，當(dāng)我為子項(xiàng)添加寬度時(shí)，滾動(dòng)起作用了，在iOS(13.3)上運(yùn)行就沒有問題啦。

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

模態(tài)框內(nèi)容

當(dāng)模態(tài)內(nèi)容太長時(shí)，我們可以很容易地使區(qū)域可滾動(dòng)。要做到這一點(diǎn)，我們應(yīng)該做到以下幾點(diǎn)

設(shè)置模態(tài)框的最大高度
模態(tài)框 body 應(yīng)占用全部可用空間

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

/* 1. 讓模態(tài)框 body 占據(jù)剩余的可用空間 */
/* 2. 如果內(nèi)容很長，則允許滾動(dòng)。我使用`auto`是因?yàn)樗趦?nèi)容足夠長之前不會(huì)顯示滾動(dòng)條 */
.modal__content {
    flex-grow: 1; /* [1] */
    overflow-y: auto; /* [1] */
}

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

帶有圓角的卡片

當(dāng)我們有一張卡并且希望其角是圓的時(shí)，我們傾向于為頂部和底部的角添加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;
}

這可能需要很多工作，特別是如果卡片在移動(dòng)設(shè)備上具有不同的設(shè)計(jì)。例如，它們不會(huì)彼此堆疊，而不是堆疊其子項(xiàng)。

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

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

動(dòng)畫

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

在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;
}

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

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

Overflow的常見問題：在手機(jī)上滾動(dòng)

例如，當(dāng)我們有一個(gè)滑動(dòng)條時(shí)，僅僅添加overflow-x是不夠的。在「Chrome iOS」上，我們需要手動(dòng)滾動(dòng)和移動(dòng)內(nèi)容。看下面的動(dòng)圖：

幸運(yùn)的是，有一個(gè)屬性可以增強(qiáng)滾動(dòng)體驗(yàn)。

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

這稱為「基于動(dòng)量的滾動(dòng)」。根據(jù)MDN：

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

「auto」：使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。「touch」：使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

下圖是使用基于動(dòng)量的滾動(dòng)的效果。

內(nèi)聯(lián)塊元素

根據(jù)CSS規(guī)范：

?
將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈在同一行內(nèi)，允許空格。(準(zhǔn)確地說，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，周圍元素保持在同一行，但可以設(shè)置寬度和高度塊元素的屬性)
?

當(dāng)一個(gè)inline-block元素的overflow值不是visible的時(shí)，這將導(dǎo)致該元素的底邊根據(jù)其同級(jí)元素的文本基線對(duì)齊。

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

.button {
    vertical-align: top;
}

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

水平滾動(dòng)問題

通常，我們會(huì)遇到水平滾動(dòng)的問題，當(dāng)原因未知時(shí)，滾動(dòng)滾動(dòng)會(huì)變得更加困難。在本節(jié)中，我將列出水平滾動(dòng)的一些常見原因，以便大家以后在構(gòu)建布局時(shí)可以想到到它們。

position 是 absolutely/fixed 元素

當(dāng)元素的position值為absolute或fixed值時(shí)，就有可能導(dǎo)致水平滾動(dòng)。當(dāng)left，right值中的一個(gè)將元素定位在body元素外部時(shí)，可能會(huì)發(fā)生這種情況

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

grid 項(xiàng)目

CSS 網(wǎng)格有三種情況可以導(dǎo)致水平滾動(dòng)，來看看它們。

「對(duì)列使用像素值」

當(dāng)使用像素值時(shí)，這將在視口寬度較小時(shí)引起問題。見下文：

.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;
}

可能會(huì)遺忘要針對(duì)移動(dòng)設(shè)備進(jìn)行測試，因?yàn)樽钚挾葹?00px，這將導(dǎo)致在某個(gè)點(diǎn)進(jìn)行水平滾動(dòng)。

一個(gè)簡單的解決方法是將grid-template-columns重置為1fr，并在視口較大時(shí)對(duì)其進(jìn)行更改。

.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

長詞或鏈接

處理內(nèi)容中的長字或鏈接時(shí)，它應(yīng)該換行，否則，將會(huì)出現(xiàn)水平滾動(dòng)。

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

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

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

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

如何調(diào)試水平滾動(dòng)問題

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

使用 CSS outline

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

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

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

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

Firefox scroll標(biāo)簽

在Firefox中，會(huì)向?qū)е滤綕L動(dòng)的元素添加一個(gè)小標(biāo)簽。

刪除元素

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

最后一個(gè)解決方案:使用overflow-x: hidden

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

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

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

多人在使用 CSS 時(shí),對(duì) Display, Visibility 和 Overflow 三個(gè)屬性的理解并不是很清晰,這里就對(duì)這三個(gè)屬性做一下分析,對(duì)應(yīng)三個(gè)屬性在使用時(shí)的區(qū)別.

Display

display 用來設(shè)置或檢索對(duì)象是否及如何顯示。

display: none

display 屬性為 none 時(shí),隱藏標(biāo)簽對(duì)象。不會(huì)為對(duì)象保留其位置空間,它下面所在的元素會(huì)被自動(dòng)上移占有被隱藏標(biāo)簽位置。

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 時(shí),默認(rèn)有顯示標(biāo)簽的意義,同時(shí)可以將標(biāo)簽轉(zhuǎn)換為塊元素顯示,這時(shí)標(biāo)簽會(huì)獨(dú)占一行,并且可以設(shè)置寬高屬性。

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 時(shí),指定對(duì)象為內(nèi)聯(lián)元素,此時(shí)對(duì)象的寬高屬性不在有效,元素大小取決于實(shí)際內(nèi)容大小。

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 屬性用來設(shè)置或檢索是否顯示對(duì)象。與 display 屬性不同，該屬性為隱藏的對(duì)象保留其占據(jù)的物理空間, 該屬性默認(rèn)值為 visible, 設(shè)置對(duì)象可見。

visibility: hidden

visibility 屬性為 hidden 時(shí),隱藏標(biāo)簽對(duì)象。但該對(duì)象所占用的位置空間會(huì)被保留。

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 屬性用來檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。

overflow: visible

overflow 默認(rèn)值為 visible, 作用是按實(shí)際效果顯示 ,不剪切超出范圍的內(nèi)容。

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時(shí),會(huì)將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，將不出現(xiàn)滾動(dòng)條。

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, 作用是將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，并以滾動(dòng)條的方式顯示超出的內(nèi)容。

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時(shí), 作用是在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條，該值為body對(duì)象和textarea的默認(rèn)值。

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;
}

效果如下:

總結(jié):

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

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

要知道自己想要什么，抓住重點(diǎn)，不忘初心。

這個(gè)世界上百分之20的人，掌握著百分之80的財(cái)富。

接下來一系列教程，就帶領(lǐng)大家抓住重點(diǎn)，一起做那百分之20的人。

往期知識(shí)點(diǎn)回顧：

重點(diǎn)屬性-display

重點(diǎn)屬性-position

重點(diǎn)屬性-float

重點(diǎn)屬性-flex

重點(diǎn)屬性-media

重點(diǎn)屬性-background

一、重點(diǎn)屬性-overflow

overflow

屬性指定如果內(nèi)容溢出一個(gè)元素的框，會(huì)發(fā)生什么。

visible

默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden

內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

scroll

內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto

如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

inherit

規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

二、實(shí)踐案例

如何使用滾動(dòng)條來顯示元素內(nèi)溢出的內(nèi)容

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

如何隱藏溢出元素中溢出的內(nèi)容

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

三、面試題

浮動(dòng)是如何產(chǎn)生的？

一般浮動(dòng)是什么情況呢？一般是一個(gè)盒子div里使用了CSS float浮動(dòng)屬性，導(dǎo)致父級(jí)對(duì)象盒子不能被撐開，這樣CSS float浮動(dòng)就產(chǎn)生了。

浮動(dòng)會(huì)產(chǎn)生什么副作用？

1、背景不能顯示

由于浮動(dòng)產(chǎn)生，如果對(duì)父級(jí)設(shè)置了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級(jí)不能被撐開，所以導(dǎo)致CSS背景不能顯示。

2、邊框不能撐開

如上圖中，如果父級(jí)設(shè)置了CSS邊框?qū)傩裕╟ss border），由于子級(jí)里使用了float屬性，產(chǎn)生浮動(dòng)，父級(jí)不能被撐開，導(dǎo)致邊框不能隨內(nèi)容而被撐開。

3、margin padding設(shè)置值不能正確顯示

由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)。特別是上下邊的padding和margin不能正確顯示。

如何清除浮動(dòng)

1、對(duì)父級(jí)設(shè)置適合CSS高度

2、clear:both清除浮動(dòng)

為了統(tǒng)一樣式，我們新建一個(gè)樣式選擇器CSS命名為“.clear”，并且對(duì)應(yīng)選擇器樣式為“clear:both”，然后我們?cè)诟讣?jí)“”結(jié)束前加此div引入“class="clear"”樣式。這樣即可清除浮動(dòng)。

3、父級(jí)div定義 overflow:hidden

對(duì)父級(jí)CSS選擇器加overflow:hidden樣式，可以清除父級(jí)內(nèi)使用float產(chǎn)生浮動(dòng)。優(yōu)點(diǎn)是可以很少CSS代碼即可解決浮動(dòng)產(chǎn)生。

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS 中 關(guān)于 Overflow，你需要了解的這些知識(shí)點(diǎn)

簡介

Overflow 有哪些值

Visible

Hidden

Scroll

Auto

Overflow-X

Overflow-Y

用例和事例

簡單滑塊

模態(tài)框內(nèi)容

帶有圓角的卡片

動(dòng)畫

Overflow的常見問題：在手機(jī)上滾動(dòng)

內(nèi)聯(lián)塊元素

水平滾動(dòng)問題

position 是 absolutely/fixed 元素

grid 項(xiàng)目

使用 minmax()

長詞或鏈接

如何調(diào)試水平滾動(dòng)問題

使用 CSS outline

Firefox scroll標(biāo)簽

刪除元素

最后一個(gè)解決方案:使用overflow-x: hidden

Visibility

Overflow

一、重點(diǎn)屬性-overflow

overflow

visible

hidden

scroll

auto

inherit

二、實(shí)踐案例

三、面試題

浮動(dòng)是如何產(chǎn)生的？

浮動(dòng)會(huì)產(chǎn)生什么副作用？

如何清除浮動(dòng)

您的項(xiàng)目需求

CSS 中關(guān)于 Overflow，你需要了解的這些知識(shí)點(diǎn)