作者：AhmadShadeed译者：前端小智来源：ishadeed出新系列：Vue2和Vue3技能手册微信搜索【大招天下】，我将与大家分享前端行业趋势和学习路径尽快等。本文已收录在GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。很多时候，我们希望有一种方法可以避免某些CSS问题或行为的发生。我们知道网页内容是动态的，网页上的东西可以改变，这增加了CSS问题或奇怪行为的可能性。防御性CSS是帮助我编写受保护CSS的片段集合。也就是说，以后的bug会更多。1.FlexboxwrappedCSSflexbox是目前最有用的CSS布局特性之一。在包装器上添加display:flex以使子项彼此相邻排序。问题是当没有足够的空间时，这些子项默认情况下不会换行。我们需要使用flex-wrap:wrap来改变这种行为。下面是一个典型的例子。.options-list{display:flex;}当空间较少时发生水平滚动。这应该是预料之中的，实际上并不是一个“问题”。.options-list{显示：flex；flex-wrap:wrap;}当使用flexbox时，一般的经验法则是允许换行，除非你想要一个可滚动的换行。那是另一回事，但是请尝试使用flex-wrap来避免意外的布局行为（在我们的例子中是水平滚动）。2.间距我们开发者需要考虑不同的内容长度。这意味着，即使看起来不需要，也应该将间距添加到组件中。在此示例中，我们在右侧有一个部分标题和一个操作按钮。现在，它看起来不错。但是如果标题更长会怎样？注意到文本离按钮太近了吗？在这里，您可能会考虑多个换行符，但现在，让我们关注间距。如果标题有空格和文本被截断，我们就不会看到这样的问题。.section__title{margin-right:1rem;}3.长内容在构建布局时考虑长内容很重要。正如您之前看到的，章节标题在太长时会被截断。这是可选的，但对于某些UI来说，考虑这一点很重要。对我来说，这是一种防御性CSS方法。在“问题”实际发生之前解决它很好。这是一个现在看起来很完美的人名列表但是，由于这是用户生成的内容，我们需要注意如何保护布局，以防内容太长。请看下图：在这种布局中，一致性非常重要。为此，我们可以使用text-overflow及其朋友来简单地截断名称。4.防止图片被拉伸或压缩在图片的宽高比无法控制的情况下，如果用户上传的图片与宽高比不匹配，最好提前想好，提供解决方案。在下面的示例中，我们有一个带有照片的卡片组件。看上去不错。当用户上传不同尺寸的图像时，它会被拉伸。这不是一件好事。看看图像是如何拉伸的！最简单的修复是使用CSSobject-fit。.card__thumb{object-fit:cover;}在项目级别，我倾向于为所有图像添加object-fit以避免意外结果。5.LockScrollLinks你是否曾经打开过一个模态并开始滚动，然后当你到达终点并继续滚动时，模态下方的内容（body元素）会滚动？这称为滚动链。默认情况下，移动浏览器倾向于在点击页面顶部或底部（或其他可滚动区域）时提供“触底”效果，甚至刷新页面。您可能还会发现，当对话框包含可滚动内容时，一旦对话框滚动到边框，对话框下方的页面内容也开始滚动——这称为“滚动链”。.在过去的几年里，有一些hack可以实现这一点，但现在，我们只需要使用CSS，这要归功于overscroll-behaviorCSS属性。在下图中，您可以看到默认的滚动链接行为。为了提前避免这种情况，我们可以将其添加到任何需要滚动的组件（例如：聊天组件、移动菜单...等）。这个属性的好处是它只有在滚动时才会生效。.modal__content{overscroll-behavior-y:contain;overflow-y:auto;}6.CSS变量回退CSS变量在网页设计中的使用越来越多。我们可以应用一种方法来使用CSS变量值，以防万一它们由于某种原因为空而不会破坏体验。当通过JS输入CSS变量的值时特别有用。这是一个例子：.message__bubble{max-width:calc(100%-var(--actions-width));}变量--actions-width在calc()函数中使用，其值来自JS。假设JS由于某种原因失败了，会发生什么？最大宽度将被评估为零。我们可以通过在var()中添加回退值来提前避免这种情况。.message__bubble{最大宽度：calc(100%-var(--actions-width,70px));这样，如果未定义变量，将使用回退(70px)。这种方法可用于变量可能失败的情况。7.使用固定的宽度或高度破坏布局的常见情况之一是对包含不同长度内容的元素使用固定的宽度或高度。FixedHeight我经常看到主要内容部分有一个固定的高度，内容比那个大，这破坏了布局。像这样：.main{height:350px;}为避免这种情况，请使用min-height而不是height:fixedwidth你见过标签离左右边缘太近的按钮吗？这是由于使用了固定宽度。.button{width:100px;}如果按钮的标签大于100px，会贴近边缘。如果太长，文本会泄漏。不是很好！要解决这个问题，我们可以简单地将宽度替换为最小宽度。.button{min-width:100px;}8.Forgetbackground-Repeat很多时候，当使用大图像作为背景时，我们往往会忘记考虑设计在大屏幕上的外观。默认情况下背景会重复。这在笔记本电脑屏幕上几乎看不到，但在大屏幕上很常见。要提前避免此行为，请确保使用重置背景重复。.hero{背景图片：url('..');background-repeat:no-repeat;}9.垂直媒体查询有时构建一个组件并仅通过调整浏览器大小来测试它是很诱人的。针对浏览器的高度进行测试可以揭示一些有趣的问题。这是我见过很多次的例子。我们有一个具有主要和次要链接的组件。二级链接应该在叙述部分的最底部。考虑以下示例。主要和次要导航看起来不错。在我看到的示例中，开发人员将position:sticky添加到二级导航，这样它就会粘在底部。但是，如果浏览器的高度较小，错误就来了。注意两个导航是如何重叠的。通过使用CSS垂直媒体查询，我们可以避免这个问题。@media(min-height:600px){.aside__secondary{position:sticky;底部：0；这样，只有当视口高度大于或等于600px时，二级导航才会卡在底部。好多了，对吧？可能有更好的方法来实现此行为（例如使用margin-auto），但在此示例中重点关注垂直查询。10.使用justify-content:space-between在flex容器中，我们可以使用justify-content来让子项之间有一定的间距。如果有一定数量的子项目，布局看起来会很好。但是，当它们增加或减少时，布局看起来会很奇怪。考虑以下示例：我们有一个包含四个项目的弹性容器。每个项目之间的间距不是间隙或边距，它存在是因为容器具有justify-content:space-between。.wrapper{显示：flex;弹性包装：包装；justify-content:space-between;}以下是项目数量小于4时发生的情况：这不是一件好事。对此有不同的解决方案：marginflexboxgap（谨慎使用）padding（可以应用于每个子元素的父元素）增加空元素，作为间隔符。为简单起见，我使用间隙。.wrapper{显示：flex;弹性包装：包装；gap:1rem;}11.图像上的文字在图像上放置文字时，必须考虑到图像无法加载。文字会是什么样子。这是一个示例：文本看起来可读，但是当图像加载失败时，它变得可读性很差。我们可以通过向元素添加背景色轻松解决此问题。只有当图像加载失败时才会显示此背景。12.小心CSS网格中的固定值假设我们有一个带有aside和main的网格。CSS看起来像这样：.wrapper{display:grid;网格模板列：250px1fr；间隙：1rem；由于空间不足，这在小视口尺寸上是有问题的。为避免此类问题，请务必在使用上述CSS网格时使用媒体查询。@media(min-width:600px){.wrapper{显示：网格；网格模板列：250px1fr；间隙：1rem；}}13.Onlydisplayscrollbarswhenneeded我们可以控制是否显示滚动条只有在内容很长的情况下。尽管如此，强烈建议使用auto作为溢出值。请考虑以下示例：请注意，即使内容很短，也有一个可见的滚动条。这对于用户界面来说不是一件好事。作为用户，当您不需要滚动条时看到它们会让人感到困惑。.element{overflow-y:auto;}使用overflow-y:auto，滚动条只有在内容很长时才可见。否则不显示。14.ScrollbarGutter另一个与滚动相关的东西是ScrollbarGutter。以前面的例子为例，当内容变长时，添加滚动条会导致布局偏移。发生布局偏移的原因是为滚动条预留空间。ScrollbarGutter是内边框边缘和外填充边缘之间的空间。对于经典滚动条，ScrollbarGutter的大小与滚动条的宽度相同。这些滚动条通常是不透明的，并且会占用相邻内容的一些空间。看看下面的图片：注意当内容因显示滚动条而变长时是如何移动的。我们可以通过使用scrollbar-gutter属性来避免这种行为。.element{scrollbar-gutter:stable;}15.CSSFlexbox中的最小内容大小如果flex项目中的文本元素或图像比项目本身更大或更长，浏览器将不会缩小它们。这是Flexbox的默认行为。考虑下面的例子：.card{display:flex;}当标题有一个长词时，它不会换行。即使我们使用overflow-wrap:break-word也不行。.card__title{overflow-wrap:break-word;}要改变这种默认行为，我们需要将flexitem的min-width设置为0。这是因为min-width的默认值为auto，会发生overflow。.card__title{overflow-wrap:break-word;min-width:0;}同样适用于flex-direction:column布局，对应使用min-height:0。16.CSSgrid和flexbox中的最小内容尺寸同理，CSSgrid对其子元素也有默认的最小内容尺寸，这是汽车。也就是说，如果有一个元素比网格项大，它就会溢出。在上面的例子中，我们在主要部分有一个轮播。
