0verflow樱花视频(0verflow动漫)

在CSS中，当一个元素太大而无法容纳时，我们可以控制它的内容。这个元素的属性是overflow，它是overflow-x和overflow-y属性的简称。

在本文中，我们将介绍这些属性，然后我们将深入讨论一些与溢出相关的概念和用例。你准备好了吗？抓住它！

简介

要使用溢出属性，我们需要确保应用该属性的元素具有以下特征:

块级元素(例如:div、section)，通过height或max-height设置高度。通过设置高度，我的意思是项目应该有内容(不是空的)，也不是添加一个显式的高度。或将white-space设置为nowrap 的元素Overflow 有哪些值

溢出属性可以具有以下属性:

❝

可见、隐藏、滚动、自动

❞

。element { height:200 px；溢出:[溢出-x][溢出-y]；}因为溢出是一个速记属性，所以它可以接受一个或两个值。第一个值用于水平轴，第二个值用于垂直轴。

Visible

溢出的默认值是可见的，其内容可以超过其父值。您可以这样设置它:

。element { height:200 px；溢出:可见；有趣的是，当一个轴设置为可见，另一个轴设置为自动时，可见的轴会被计算为自动。

[MDN][2]说:

❝

注意:将一个轴设置为可见(缺省值)并将另一个轴设置为不同的值会导致将可见轴设置为auto`。

❞

例如，如果我们用以下内容设置一个元素:

。element { height:200 px；溢出:可见自动；}溢出属性将计算为auto auto。

Hidden

当内容长于其父内容时，它将被剪切。但是，您可以使用Javascript来滚动内容。

Scroll

上图中，无论内容长不长，滚动条始终可见。注意，这取决于操作系统。

Auto

Auto这是一个聪明的关键字，只有当内容比它的容器长时，滚动条才会显示。

请注意，在图中，只有当内容比其容器长时，滚动条才可见。接下来，我们将讨论与溢出相关的手写属性。

Overflow-X

这个家伙负责X轴或元素的水平方向。

Overflow-Y

这个家伙负责y轴或者元素的垂直边缘。

用例和事例简单滑块

我们可以通过水平裁剪内容并滚动它来创建一个快速简单的滑块。

在上面的模型中，我们有水平放置的卡片和滚动条，滚动条可以滚动和显示更多的内容。为此，我们需要做到以下几点:

将卡片显示在同一行，为此使用flexbox向容器中添加overflow-x

。包装器{ display:flex；溢出-x:auto；}它可以在桌面浏览器中工作。然而，在Safari上测试iOS(12.4.1)时，滚动不起作用。经过反复实验，我给子项加宽度的时候，滚动是管用的，在iOS(13.3)上运行也没问题。

案例源代码:https://codepen . io/shaded/pen/bfb 886326 f 2066 b 6 AE 0 a 8 b 641 ECF 68 b 4？编辑=1100人

模态框内容

当模态内容太长时，我们可以很容易地使该区域可滚动。为此，我们应该做到以下几点

设置模态框的最大高度模态框 body 应占用全部可用空间

。modal { display:flex；伸缩方向:列；max-height:400 px；最大宽度:450像素；}/* 1.让模态箱体占据剩余的可用空 */* 2。如果内容很长，允许滚动。我使用“自动”是因为它不会显示滚动条*/。modal _ _ content { flex-grow:1；/* [1] */溢出-y:auto；/* [1] */}案例源代码:https://codepen . io/shaded/pen/1997908941279 f 0 a 3d 6 c 7 f 83 D6 efdc 8？编辑=0100

带有圆角的卡片

当我们有一张卡片，并希望它的角是圆的，我们倾向于添加边界半径到顶部和底部的角，如下所示:

。卡片-图像{ border-top-right-radius:7px；边框-左上-半径:7px}.卡-内容{ border-bottom-right-radius:7px；边框-底部-左侧-半径:7px这可能需要大量的工作，特别是如果卡在移动设备上有不同的设计。比如他们互不叠，不是他们的孩子。

在这种情况下，最好将overflow: hidden隐藏在包装器上，然后为其添加border-radius，这样我们只需要设置一个地方。如下所示:

。卡{溢出:隐藏；边框-半径:7px动画当涉及到动画时，overflow: hidden的好处是可以悬停在编辑时显示的隐藏元素上。考虑下面的图片:

在CSS中，它看起来像这样:

. button . slide-left { overflow:hidden；}.button.slide-left:在{ content:& # 34；"；位置:绝对；左:0；top:0；右:0；底部:0；背景:# 000；不透明度:0.25；边框半径:100像素；transform:translate x(-100%)；转场:0.2s淡入；我们有两个按钮，每个按钮都有一个虚拟元素，相应地过渡到左侧和底部。如下所示:

案例源代码:https://codepen . io/shaded/pen/7b 48418837470 e 173 f 7 a 6 CD 7 bcc 4 a 403？编辑=0100

Overflow的常见问题：在手机上滚动

举个例子，当我们有一个滑动条的时候，仅仅添加overflow-x是不够的，在“Chrome iOS”上，我们需要手动滚动移动内容。请看下面的动画:

幸运的是，有一个属性可以增强滚动体验。

。包装器{ overflow-x:auto；-WebKit-溢出-滚动:触摸；这被称为“基于动量的滚动”。根据MDN:

“-webkit-overflow-scrolling”属性控制元素是否在移动设备上使用滚动反弹效果。它有两个值:

“自动”:正常滚动时，当手指离开触摸屏时，滚动将立即停止。“触摸”:利用具有反弹效果的滚动，当手指从触摸屏上移开时，内容会继续保持滚动效果一段时间。连续滚动的速度和持续时间与滚动手势的强度成正比。还会创建一个新的堆栈上下文。

下图显示了使用基于动量的滚动的效果。

内联块元素

根据CSS规范:

❝

对象呈现为内嵌对象，但对象的内容呈现为块对象。旁边的内联对象会呈现在同一行，允许空网格。(准确地说，应用此功能的元素呈现为内联对象，周围的元素保持在同一行，但宽度和高度块元素的属性可以设置。)

❞

当内联块元素的溢出值不可见时，这将导致元素的下边缘根据其同级元素的文本基线对齐。

为了解决这个问题，我们可以将overflow: hidden添加到主按钮中，并更改其对齐方式:

。button { vertical-align:top；}案例源代码:https://codepen . io/shaded/pen/291 FDA 2293 ed 737 f 7 EB 7 DC 74 a 9318438？编辑=1100人

水平滚动问题

通常我们会遇到水平滚动的问题，在原因不明的情况下，滚动会变得更加困难。在这一节中，我将列出水平滚动的一些常见原因，以便您在将来构建布局时能够想到它们。

position 是 absolutely/fixed 元素

当元素的位置值是绝对的或固定的时，可能会导致水平滚动。当left和right值之一将元素定位在body元素之外时，可能会发生这种情况。

为了解决这个问题，我们首先需要检查为什么这个元素被放置在视口之外。如果不需要，您必须删除它或编辑位置值。

grid 项目

在三种情况下，CSS网格会导致水平滚动。让我们看看他们。

"对行使用像素值"

当使用像素值时，这将在视口宽度较小时导致问题。见下文:

。包装{ display:grid；网格-模板-列:200px 1fr网格间隙:1个；}解决方法是重置列，只使用viewport中的上一列，并有足够的空。

.wrapper { display: grid; grid-template-columns: 1fr; grid-gap: 1rem;}@media (min-width: 400px) { grid-template-columns: 200px 1fr;}

为了解决这个问题，我们需要打破长词和链接。我们能做到的。

。后内容a { word-wrap:break-word；}或者我们可以使用文本溢出:

。后内容a {溢出:隐藏；文本溢出:省略号；如何调试水平滚动现在我们知道了水平滚动的原因，我将介绍一些方法来帮助我们识别这些问题并解决它们。

使用 CSS outline

*，*:之前，*:之后{大纲:固体1px # 000通过添加这些内容，我们可以注意到哪些元素更宽，从而解决问题。艾迪·奥斯马尼用他简单的剧本进一步完善了这一点:

[]. foreach . call(document . query selector all(& # 34；*")，函数(a){ a . style . outline = & # 34；1px固体# & # 34；+(~ ~(math . random()*(1 & lt；& lt24))).toString(16)})这个脚本的作用是将轮廓颜色随机化，而不是让所有轮廓都只有一种颜色，这样会更容易。

Firefox scroll标签

在Firefox中，一个小标签被添加到导致水平滚动的元素中。

删除元素

有时候，上述技术是无效的。在这种情况下，我要做的就是打开DevTools，然后开始删除元素，注意。一旦水平滚动消失，我就可以识别出导致问题的元素。

最后一个解决方案:使用overflow-x: hidden

最后，可以使用overflow-x: hidden来解决水平滚动问题，但这一般是最后的替代方案。

作者:Ahmad shaded译者:前端肖智来源:sitepoint

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