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，你需要了解的这些知识点