摘要：本文涵盖了20个CSS技巧，可以解决很多工作中的常见问题，让你也成为CSS高手。本文涵盖了20个CSS技巧，可以解决很多工作中的常见问题，让你成为CSS高手。1、使用CSS重置（reset）CSS重置库如normalize.css已经使用多年。它们可以为您的网站风格提供更清晰的标准，以确保跨浏览器的一致性。大多数项目不需要这些库中包含的所有规则。您可以对布局中的所有元素应用一个简单的规则，删除所有边距、填充并更改浏览器的默认框模型。*{box-sizing:border-box;margin:0;padding:0}使用box-sizing语句是可选的，如果你使用下面的继承框模型形式你可以跳过它。2.继承盒子模型让盒子模型继承自html：html{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}3.使用flexboxlayouttoavoidmarginproblems(GetRidofMarginhackswidthFlexbox)你有多少次尝试过设计一个网格布局比如：一个作品集或者一个图片库，如果你使用浮动，那么你需要清除浮动并重置边距以使其分解为所有需要的行数。为了避免nth-,first-,last-child问题，可以使用flexbox.flex-container{display:flex;justify-content:space-between;}.flex-container.item的space-between属性值{flex-basis:23%;}4.使用:not()解决列表边框问题在网页设计中，我们通常使用：last-childnth-child选择器来覆盖原来在父选择器上声明的样式。例如，导航菜单使用边框为每个链接Link创建分隔符，然后添加规则以删除最后一个链接的边框。navli{border-right:1pxsolid#666;}.navli:last-child{border-right:none;这是一种混乱的方式，不仅强制浏览器以一种方式呈现，而且随后使用特定的选择器撤消它。像这样覆盖样式是不可避免的。然而，最重要的是，我们可以使用:not伪类在你想要声明的元素上只应用一种样式：.navli:not(:last-child){border-right:1pxsolid#666;}上面就是除了最后一行，所有的.navli都加上了border样式，是不是很简单！当然，您也可以使用.navli+li或.navli:first-child~li，但是:not更语义化和更易理解。5.将行高样式添加到正文会导致样式表效率低下。一件事是不断重复陈述。最好做好项目规划和排版规则，这样CSS会更流畅。实现这一点需要我们了解级联以及如何在其他地方继承通用选择器中编写的样式。行间距（line-height）可以作为你整个项目的一个属性集，这样不仅可以减少代码量，还可以让你的网站风格给一个标准的外观body{line-height:1.5;}请注意，这里的语句没有单位，我们只是告诉浏览器让它渲染行高为渲染字体大小的1.5倍全局规则是为优雅设置内容布局奠定基础的好方法html,body{height:100%；保证金：0；}body{-webkit-align-items:center;-ms-弹性对齐：居中；对齐项目：居中；显示：-webkit-flex；显示：弹性；}7.使用SVG图标SVG用于所有分辨率类，所有浏览器也都支持。所以.png.jpg.gif等文件可以丢弃。FontAwsome5还为SVG提供了图标字体。设置SVG格式与其他图像类型相同：.logo{background:url("logo.svg");}提醒：如果在按钮等交互元素上使用SVG，SVG会出现无法加载的问题。以下规则可用于确保可以访问SVG（确保在HTML中设置了适当的aria属性）。no-svg.icon-only:在{content:attr(aria-label);}8.使用"OWL来选择使用通用选择器（universalselector）*和相邻兄弟选择器（adjacentsiblingselector）+可以提供强大的CSS功能，为文档流中的所有元素设置统一规则，紧跟在其他元素之后*+*{margin-top:1.5rem;}这是一个很棒的技巧，可以帮助您创建更均匀的字体和间距。在上面的例子中，跟在其他元素后面的元素，比如H3后面的H4，或者一段后面的一个段落，它们之间至少有1.5rems的间距（大约30px）9.一致的垂直结构（ConsistentVerticalRhythm）提供了使内容更具可读性的视觉美感。如果猫头鹰选择器过于通用，请在元素内使用通用选择器(*)为布局的特定部分创建一致的垂直节奏：.intro>*{margin-bottom:1.25rem;}10.为了更漂亮的换行文本使用box-decoration-break假设你想对换行到多行的长行文本应用统一的间距、边距、突出显示或背景颜色，但不希望整个段落或标题看起来像一个大块。BoxDecorationBreak属性允许您仅将样式应用于文本，同时保持填充和边距不变。如果您想在悬停时应用突出显示，或在滑块中设置子文本样式以突出显示外观，这将特别有用：.p{display:inline-block;box-decoration-break:clone;-o-box-decoration-break:clone;-webkit-box-decoration-break:clone;}内联块声明允许颜色、背景、边距和填充应用于每一行文本，而不是整个元素，克隆声明确保应用这些样式均匀地分配到每一行。11.等宽表格单元格表格可能很难处理，所以尝试使用table-layout:fixed来保持单元格等宽：.calendar{table-layout:fixed;}12.强制使用属性选择器显示空链接。特别有用的是通过CMS插入的链接，这些链接通常没有类属性，可以帮助您在不影响级联的情况下专门设置它们的样式。例如，元素没有文本值，但href属性有一个链接：a[href^="http"]:empty::before{content:attr(href);}13.样式“默认”链接当谈到链接样式时，您几乎可以在每个样式表中找到通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更有问题。尝试这种对“默认”链接进行样式设置的侵入性较小的方式a[href]:not([class]){color:#999;文字修饰：无；transition:allease-in-out.3s;}14.RatioBox要创建一个具有固有比例的框，您需要做的就是将顶部或底部填充应用到div.container{height:0;底部填充：20%；位置：相对；}.containerdiv{border:2pxdashed#ddd;高度：100%；左：0；位置：绝对；顶部：0；宽度：100%；}填充20%使框的高度等于其宽度的20%。无论视口的宽度如何，子div都将保持其宽高比(100%/20%=5:1)。15.破碎的图像这种技术不是关于减少代码，而是关于改进设计细节。损坏的图像可能由于多种原因而发生，要么难看要么导致混淆（只是一个空元素）。使用这个小CSS创建更好的外观：img{display:block;字体系列：Helvetica、Arial、sans-serif；字体粗细：300；高度：自动；行高：2；位置：相对；文本对齐：居中；宽度：100%；}img:before{content:"很抱歉，下面的图片丢失了:(";display:block;margin-bottom:10px;}img:after{content:"(url:"attr(src)")";display:block;font-size:12px;}16、全局调整使用rem；局部调整使用em设置根目录基本字号后，例如htmlfontsize:15px;，就可以将包含元素的字体大小设置为rem:article{font-size:1.25rem;}aside{font-size:.9rem;}然后将文本元素的字体大小设置为emh2{font-size:2em;}p{font-size:1em;}每个包含的元素现在都被分段，更容易设置样式，更容易维护和更灵活。17.隐藏未静音的自动播放视频，当您处理以下内容时，这是自定义用户样式表的一个很好的技巧你无法从源代码轻松控制。这个技巧将帮助你避免在页面加载时用自动播放视频中的声音分散访问者的注意力，并再次提供Wonderful:not()伪选择器：video[autoplay]:not([muted]){display:none;}18.根类型的灵活使用响应式布局中的字体大小应该能够自动调整到视口，从而节省编写媒体查询来处理字体大小的工作。您可以使用:not和视口单位根据视口高度和宽度计算字体大小：:root{font-size:calc(1vw+1vh+.5vmin);}现在你可以使用根em单位，它基于：not:body{font:1rem/1.6sans-serif;结合上面的rem/em技巧可以更好地控制。19.在表单元素上设置字体大小以获得更好的移动体验。为防止手机浏览器（iOSSafari等）在点击
