本文涵盖了20个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.使用flexbox布局避免marginproblems(GetRidofMarginhackswidthFlexbox)你有多少次尝试设计网格布局，例如：作品集或图片库，如果你使用浮动，那么你需要清除浮动并重新设置边距才能实现breakdownintoallRowcount是必需的。为了避免nth-,first-,last-child问题，可以使用flexbox的space-between属性值。.flex-container{display:flex;justify-content:space-between;}.flex-container.item{flex-basis:23%;}4.使用：not()解决网页设计中listsborder的问题,我们通常使用:last-childnth-child选择器来覆盖最初声明在父选择器上的样式。比如一个导航菜单，通过使用borders为每个链接Link创建一个分隔符，然后添加一条规则去除最后一个链接的边框.navli{border-right:1pxsolid#666;}.navli:last-child{border-right:none;}这是一种混乱的方式，不仅强制浏览器以一种方式呈现，而且随后使用特定的选择器撤消它。像这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用:not伪类：.navli:not(:last-child){border-right:1pxsolid#666;}在你想要声明的元素上只应用一种样式。那除了最后一个li，所有的.navli都加上了border样式，是不是很简单！当然你也可以使用.navli+li或.navli:first-child~li，但是：not更加语义化（semantic）并且容易理解。5.给body加上行高样式导致样式效率低下（inefficientstylesheets）一是声明的不断重复。最好做好项目规划和排版规则，这样CSS会更流畅。实现这一点需要我们了解级联以及如何在其他地方继承通用选择器中编写的样式。行间距（line-height）可以作为你整个项目的一个属性集，这样不仅可以减少代码量，还可以让你的网站样式给一个标准的外观body{line-height:1.5;}请注意，这里的语句没有单位，我们只是告诉浏览器让它渲染行高为渲染字体大小的1.5倍全局规则是为优雅设置内容布局奠定基础的好方法html,body{height:100%;margin:0;}body{-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-flex;display:flex;}7.使用SVGiconsSVG用于所有分辨率类，所有浏览器也都支持它。所以.png.jpg.gif等文件可以丢弃。FontAwsome5还为SVG提供了图标字体。设置SVG的格式和其他图片类型一样：.logo{background:url("logo.svg");}提醒：如果在按钮等交互元素上使用SVG，SVG会出现无法加载的问题。以下规则可用于确保可以访问SVG（确保在HTML中设置了适当的aria属性）。no-svg.icon-only:after{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.为了更漂亮wrappingtext使用box-decoration-break假设你想应用统一的间距，边距s、突出显示或背景颜色到换行到多行的长文本行，但不希望整个段落或标题看起来像一个大块。BoxDecorationBreak属性允许您仅将样式应用于文本，同时保持填充和边距不变。如果你想在悬停时应用突出显示，或者在滑块中设置子文本样式以具有突出显示的外观，这将特别有用：.p{display:inline-block;box-decoration-break:clone;-o-box-decoration-break:clone;-webkit-box-decoration-break:clone;}行内块声明允许将颜色、背景、边距和填充应用于每一行文本，而不是整个元素，克隆声明确保应用这些样式均匀地分配到每一行。11.Constant-widthtablecells表格可能很难处理，所以尝试使用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;text-decoration:none;transition:allow-in-out.3s;}14.比例框要创建一个具有固有比例的框，您需要做的就是将顶部或底部填充应用于div：.container{height:0;padding-bottom:20%;position:relative;}.containerdiv{border:2pxdashed#ddd;height:100%;left:0;position:absolute;top:0;width:100%;}填充20%使框的高度等于其宽度的20%。无论视口的宽度如何，子div都将保持其宽高比(100%/20%=5:1)。15.破碎的图像这种技术不是关于减少代码，而是关于改进设计细节。损坏的图像可能由于多种原因而发生，要么难看，要么导致混乱（只是一个空元素）。使用这个小CSS创建更好的外观：img{display:block;font-family:Helvetica,Arial,sans-serif;font-weight:300;height:auto;line-height:2;position:relative;text-align:center;width: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.隐藏未静音的自动播放视频这是一个很棒的技巧在轻松控制内容时自定义用户样式表。这个技巧将帮助您避免在页面加载时用自动播放视频中的声音分散访问者的注意力，并再次提供一个很棒的:not()伪选择器：video[autoplay]：不（[静音]）{显示：否ne;}18.灵活使用根类型响应式布局中的字体大小应该能够自动适应视口，从而省去编写媒体查询、处理字体大小的工作。您可以使用:not和视口单位从视口高度和宽度计算字体大小：:root{font-size:calc(1vw+1vh+.5vmin);}现在您可以使用根em单位，该单位基于:not:body{font:1rem/1.6sans-serif;}结合上面的rem/em技巧可以更好地控制。19.在表单元素上设置字体大小以获得更好的移动体验。为防止手机浏览器（iOSSafari等）在点击
