作者：Ahmadshaded译者：前端小智来源：sitepoint点赞再看，养成习惯本文已收录在GitHubhttps://github.com/qq44924588...分类，也整理一下我的很多文档和教程材料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。在CSS中，我们可以控制元素的内容何时太大而无法容纳。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写。在本文中，将介绍这些属性，然后我们将深入讨论与溢出相关的一些概念和用例。你准备好了吗？得到它！简介要使用overflow属性，我们需要保证它所应用的元素具有以下特性：块级元素（如：div、section），通过height或max-height设置高度。通过设置高度，我的意思是该项目应该有内容（不是空的），也没有添加明确的高度。或者设置white-space为nowrapelementOverflowoverflow属性取值是多少可以有accept属性：visible,hidden,scroll,auto.element{height:200px;overflow:[overflow-x][overflow-y];}由于overflow是一个速记属性，它可以接受一个或两个值。第一个值用于水平轴，第二个值用于垂直轴。Visibleoverflow默认为可见，其中内容可以溢出其父值。可以这样设置：.element{height:200px;overflow:visible;}有意思的是，当一个轴设置为visible，另一个设置为auto时，visible轴会被计算为auto。MDN是这样说的：注意：将一个轴设置为可见（默认值）并同时将另一个轴设置为不同的值会导致将可见轴设置为auto的行为。例如，如果我们设置一个元素如下：.element{height:200px;溢出：可见自动；}overflow属性的计算值将是autoauto。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。隐藏当内容比其父内容长时，将被剪切。但是，可以使用Javascript滚动内容。滚动在上图中，无论内容多长，滚动条始终可见。请注意，这取决于操作系统。Autoauto这是一个巧妙的关键字，仅当内容长于其容器时才显示滚动条。请注意，在图中，滚动条仅在内容长于其容器时可见。接下来，我们将讨论与溢出相关的普通属性Overflow-X，它负责元素的x轴或水平边缘。Overflow-Y这个家伙负责元素的y轴或垂直边。用例和案例SimpleSlider我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。在上面的模型中，我们有水平放置的卡片，还有一个滚动条来滚动和显示更多内容。为此，我们需要执行以下操作：在同一行显示卡片，为此添加overflow-x.wrapper{display:flex;overflow-x:auto;}使用flexbox到容器，它适用于桌面浏览器。但是，在Safari中的iOS(12.4.1)上进行测试时，滚动不起作用。经过反复试验，当我为孩子添加宽度时，滚动有效，并且在iOS(13.3)上运行良好。示例源码：https://codepen.io/shadeed/pe...模态框内容当模态内容过长时，我们可以很方便的让区域可以滚动。为此，我们应该执行以下操作来设置模态框的最大高度模态主体应占据全部可用空间。modal{display:flex;弹性方向：列；最大高度：400px；max-width:450px;}/*1.让模态主体占据剩余的可用空间*//*2.如果内容很长，允许滚动。我使用`auto`是因为它不会显示滚动条，直到内容足够长*/.modal__content{flex-grow:1;/*[1]*/overflow-y:auto;/*[1]*/}示例源代码：https://codepen.io/shadeed/pe...带有圆角的卡片当我们有一张卡片并希望它的角是圆的时，我们倾向于添加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:"";位置：绝对；左：0；顶部：0；右：0；底部：0；背景：#000；不透明度：0.25；边框半径：100px；转换：translateX(-100%)；transition:0.2sease-in;}我们有两个按钮，每个按钮都有一个相应地向左和底部过渡的伪元素。如下图：示例源码：https://codepen.io/shadeed/pe...大家都说简历里没有项目可写，所以我给大家找了一个项目，还附带了一个【搭建教程】].Overflow常见问题解答：在移动设备上滚动例如，当我们有一个滑块时，仅仅添加overflow-x是不够的。在ChromeiOS上，我们需要手动滚动和移动内容。请看下面的动画：幸运的是，有一个属性可以增强滚动体验。.wrapper{溢出-x：自动；-webkit-overflow-scrolling:touch;}这称为基于动量的滚动。根据MDN：-webkit-overflow-scrolling属性控制元素是否在移动设备上使用滚动反弹效果。它有两个值：auto：使用正常滚动，当手指离开触摸屏时，滚动会立即停止。touch：使用带回弹效果的滚动，当手指离开触摸屏后，内容会继续保持滚动效果一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。下图是使用动量滚动的效果。根据CSS规范的内联块元素：对象呈现为内联对象，但对象的内容呈现为块对象。相邻的内联对象将在同一行上呈现，允许有空格。（准确的说，应用该特性的元素被渲染为内联对象，周围元素保持在同一行，但是块元素的width和height属性是可以设置的）当一个inline-block元素有一个overflow不是visible值，这将导致该元素的底部边缘与其兄弟元素的文本基线对齐。为了解决这个问题，我们可以在主按钮上添加overflow:hidden并更改其对齐方式：.button{vertical-align:top;}示例源代码：https://codepen.io/shadeed/pe...horizo??ntalscrolling问题通常，我们会遇到水平滚动的问题，当原因不明时，滚动会变得更加困难。在本节中，我将列出水平滚动的一些常见原因，以便您稍后在构建布局时考虑它们。position是absolutely/fixed元素当元素的position值为absolute或fixed时，可能会导致水平滚动。当左值、右值之一将元素定位在body元素之外时，就会发生这种情况。要解决此问题，您首先需要检查为什么将此元素放置在视口之外。如果不需要，您必须将其删除或编辑位置值。griditemCSSgrid有3种情况会导致水平滚动，看看吧。为列使用像素值当使用像素值时，这会在视口宽度较小时产生问题。见下文：.wrapper{display:grid;网格模板列：200px1fr；grid-gap:1rem;}解决办法是重置列，只在有足够空间的视口上使用上面的列。.wrapper{显示：网格；网格模板列：1fr；grid-gap:1rem;}@media(min-width:400px){grid-template-columns:200px1fr;}使用minmax().wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:1rem;}可能会忘记测试移动设备，因为最小宽度为300px，这将导致水平滚动的某个点。一个简单的修复是将grid-template-columns重置为1fr并在视口更大时更改它。.wrapper{显示：网格；网格模板列：1fr；grid-gap:1rem;}@media(min-width:400px){grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}源码地址：https://codepen.io/shadeed/pe...大家都说简历里没有项目可写，所以给大家找了一个项目，还附上了一个【搭建教程】。长词或链接在处理内容中的长词或链接时，应该换行，否则会出现水平滚动。要解决这个问题，我们需要断开长单词和链接。我们可以这样做.post-contenta{word-wrap:break-word;}或者我们可以使用text-overflow:.post-contenta{overflow:hidden;text-overflow:ellipsis;}现在我们知道了水平滚动的原因，我将介绍一些方法来帮助我们识别这些问题并修复它们。使用CSSoutline*,*:before,*:after{outline:solid1px#000;}通过添加这些我们可以注意到哪些元素具有更大的宽度，因此我们可以解决问题。AddyOsmani用他的简单脚本更进一步：[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})这个脚本所做的是随机化轮廓颜色，而不是让所有轮廓都具有单一颜色，这样会更容易。Firefox滚动标签在Firefox中，一个小标签被添加到导致水平滚动的元素。删除元素有时，上述技术不起作用。我在这种情况下所做的是打开DevTools，然后开始删除元素并注意。一旦水平滚动消失，我就能够识别导致问题的元素。一个最终的解决方案：使用overflow-x:hidden最后，可以使用overflow-x:hidden来解决水平滚动问题，但这通常是不得已的解决方案。原文：https://ishadeorddeed.com/art...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。在这里顺便推荐一个好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
