前言随着前台开发越来越注重效率，通过使用选择器，简化代码，可以快速加载渲染。 Less和Scss之类的预解析器工作的时候，需要绕很长一段路，但是直接用css会更快。 这里有20个css技巧可以帮助你减少重复的规则和重复。规范布局中的样式流程，不仅可以帮助你高效的创建自己的框架，还可以处理很多常见的问题。 1.用css重置)CSS重置库比如normalize.css已经用了很多年了。他们可以为你的网站风格提供一个明确的标准，保证浏览器之间的一致性。 大多数项目不需要这些库中包含的所有规则。一个简单的规则可以应用于布局中的所有元素。删除所有边距和填充以更改浏览器的默认框模型。 * {框大小:边框-框；边距:0；填充:使用框大小声明的0是可选的。如果你使用下面的继承框模型形式，你可以跳过它。2.继承盒子模型，让盒子模型继承html:html { box-sizing:border-box；}*，*:before，*:after { box-sizing:inherit；}3.使用flexbox布局来避免边距问题(去掉边距宽度flexbox)。你尝试过多少次设计一个网格布局，比如一个组合或者一个图片库？如果使用浮动方法，则需要清理浮动并重置外部边距，以将其分解为所需的行数。 为了避免第n个、第一个和最后一个孩子的问题，您可以使用flexbox的space-between属性的值。flex-container { display:flex；justify-content:space-between；}.flex-container . item { flex-basis:23%；}4.使用:not()处理列表边框问题。在网页设计中，我们通常使用:last-child n-child selector来覆盖原始价格公告应该在父选择器上的样式。 例如，对于导航菜单，使用边框为每个链接创建一个分隔符，然后添加一个规则来删除边框。最后一个链接的nav Li { border-right:1 px solid # 666；}.nav li:最后一个孩子{border-right:无；}这是一种很混乱的方式。它不仅强制浏览器以一种方式呈现，然后通过特定的选择器取消它。 这种重叠模式是不可避免的。 但是，最重要的是，我们只能在你要声明的元素上使用一种样式，通过使用:not pseudo-class:。nav Li:not(:last-child){ border-right:1 px solid # 666；}以上是，除了最后的李，所有。nav li都加了边框样式，是不是很简单！当然也可以用。导航li+li or。nav李:第一胎~李，但是:not更语义化，更好理解。 5.将行高样式添加到正文中导致样式表效率低下的一个原因是重复的声明。 最好做好项目规划和构图规则，这样CSS会更流畅。 为了实现这一点，我们需要了解cascade，以及如何在其他地方继承通用选择器中编写的样式。 行距(line-height)可以作为你整个项目的属性集，不仅可以减少代码量，还可以让你的网站的风格给一个标准的外观体{ line-height:1.5；}请注意，这里的公告没有单位。我们只是告诉浏览器让渲染的行高是渲染字体大小的1.5倍。6.垂直居中的任何东西。当你不准备使用CSSGrid布局时，设置垂直居中布局的全局规则是一个很好的方法，可以为优雅的内容布局打下HTML的基础。身体{身高:100%；边距:0；} body {-WebKit-align-items:center；-ms-flex-align:居中；对齐-项目:居中；显示:-WebKit-flex；显示器:flex}“这15种CSS居中方式你用过哪一种？7.所有判别类都用SVG iconsSVG，所有浏览器也都支持。 所以可以丢弃. png.jpg.gif之类的文件。 FontAwsome5中也提供了SVG的图标字体。 像设置其他图像类型一样设置SVG的格式:。logo { background:URL(" logo . SVG ")；}温馨提醒:如果在交互元素上使用SVG，比如button，SVG会导致无法加载的问题。 以下规则可用于确保SVG可以访问(确保在HTML中设置了适当的aria属性)。no-SVG . icon-only:after { content:attr(aria-label)；}8.使用“OWL选择器”使用通用选择器)*和相邻兄弟选择器)+可以提供强大的CSS功能，可以为文档流中紧跟其他元素的所有元素设置统一的规则*+* { margin-top:1.5 rem；}这是帮助您创建更统一的字体和间距的一个很好的技巧。 在上面的列表中，其他元素后面的元素，如H3后面的H4，或段落后面的段落，它们之间的间距至少为1.5雷姆(约30px)。9.一致的垂直节奏。一致的垂直节奏提供了视觉美感，使内容更具可读性。 如果owl选择器过于笼统，可以在元素中使用general选择器(*)，为布局的特定部分创建一致的垂直节奏:。intro >；* {边距-底部:1.25雷姆；}10.使用box-decoration-break获得更漂亮的换行文本。假设您希望对换行的长行应用统一的间距、边距、突出显示或背景色，但您不希望整个段落或标题看起来像一个大块。 “方框装饰分隔符”属性允许您仅将样式应用于文本，同时保持填充和边距的完整性。 如果您想在悬停时应用高亮显示，或者如果您想将滑块中的子文本样式设置为高亮显示，此功能特别有用:。p { display:inline-block；框-饰-破:克隆；-o-box-decoration-break:克隆；-webkit-box-decoration-break:克隆；}内联块公告允许将颜色、背景、边距和填充应用于每一行文本，而不是整个元素，克隆公告确保这些样式均匀地应用于每一行。 11.等宽表格单元格表格可能难以求解，因此请尝试使用table-layout: fixed来保持单元格宽度相等:。日历{表格布局:固定；}12.强制使用属性选择器来显示空链接。这对于通过CMS插入的链接特别有用，CMS通常没有类属性，帮助您为它们设置特定的样式，而不会影响层叠。 例如，< a & gt元素没有文本值，但是href属性有一个链接:a[href = " http "]:empty::before { content:attr(href)；}13.样式“默认”链接说到链接样式，你几乎可以在每个样式表中找到通用的A样式。 这迫使你为子元素中的任何链接编写额外的覆盖和样式规则，当使用像WordPress这样的CMS时，它可能会导致你的主链接样式比按钮文本颜色更有问题。 试试这种不太打扰的方式，给“默认”链接添加样式:a[href]:not([class]){ color:# 999；文字-装饰:无；过渡:全部缓入缓出. 3s；}14.比率框要创建一个具有固有比率的框，您需要做的就是对div:应用顶部或底部填充。容器{高度:0；垫底:20%；位置:相对；}.container div{border:2px虚线# ddd身高:100%；左:0；位置:绝对；top:0；宽度:100%；}填充20%，使框的高度等于其宽度的20%。 无论视口的宽度如何，子div都将保持其纵横比(100%/20% = 5: 1) 15.风格破碎的图片这种技术不在于减少代码，而在于细化设计细节。 图像破碎的原因有很多，要么难看，要么混乱(只是一个空的元素)。 用这个小CSS:img { display:block；创建更漂亮的效果；字体系列:Helvetica，Arial，无衬线；字体粗细:300；高度:自动；行高:2；位置:相对；文本对齐:居中；宽度:100%；}img:before{content:“很抱歉，下图缺失:("；显示:块；边距-底部:10px}img:在{content:"(url: "attr(src)")"之后；显示:块；字体大小:12px}16.使用rem进行全局大小调整；设置根目录的基本字体大小后使用em进行局部调整大小，例如html字体大小:15px；，可以将包含元素的字体大小设置为rem:article { font-size:1.25 rem；}抛开{ font-size:. 9 rem；}然后将文本元素的字体大小设置为em H2 { font-size:2em；} p { font-size:1em；}现在，每一个包含的元素都变得分区，更容易样式化，更容易维护，也更灵活。 web开发应该用Em还是rem？17.隐藏未静音的自动播放视频。当你从源代码中解决了不容易控制的内容时，这是一个设置你自己的客户样式表的好技术。 这一招将通过在加载页面时自动播放视频中的声音来帮助你避免打扰访客，并再次提供精彩:not()伪选择器:video[autoplay]:not([muted]){ display:none；}18.根类型响应式布局中字体大小的灵活使用应能自动调整到查看区域，从而省去编写媒体查询的工作，解决字体大小问题。 可以使用:not和viewport units根据视口高度和宽度计算字体大小::root { font-size:calc(1VW+1VH+. 5 vmin)；}现在，您可以使用根em单元，它基于:not:body { font:1 rem/1.6 sans-serif；}结合以上rem/em技术，获得更好的控制。 有关管理旧版本Safari的提醒，请参见iOS VH单元错误的CSS修复。 9.设置表单元素的字体大小以获得更好的移动体验。为了防止手机浏览器(iOS Safari等。)通过单击<选择& gt下拉列表时放大HTML表单元素。请添加font-size style:input[type = " text "]，input [type = "number"]，select，textarea { font-size:16px；}20、CSS变量最后，最强大的CSS级别来自于CSS变量，它允许你公布一组公共属性值，可以在样式表的任何地方被关键字重用。 您可以在整个项目中使用一组颜色来保持一致性。 在CSS中重复这些颜色值不仅烦人，而且容易出错。 如果某个颜色在某个时候需要改变，你就得去找，去替换，这样不靠谱，或者说速度不快。当为最终客户构建产品时，变量使定制变得更加容易。 比如::root {-main-color:# 06c；-强调色:# 999；}h1、h2、H3 { color:var(-main-color)；}a[href]:not([class])，p，页脚span { color:var(-accent-color)；}