列举：1.使用CSS重置2.继承box-sizing3.使用unset代替重置所有属性4.使用:not()选择器判断表单是否显示边框5.对于为elements6.body添加行高。为表单元素设置:focus7。垂直居中任何element8。逗号分隔列表9。使用负nth-child来选择elements10。使用SVG图标11。.使用最大高度创建一个纯CSSslider13。创建等宽tables14的网格。使用Flexbox去除多余的边距15。使用属性选择器来选择空链接16。为“默认”链接定义样式17。一致的垂直节奏18.Intrinsicscalebox19.为破碎图像定义样式]20.使用rem全局调整大小；em用于本地调整大小21.隐藏未静音、自动播放的电影22.使用选择器：root来控制字体弹性23.为了更好的移动体验，为表单元素设置字体大小24.使用指针事件控制鼠标事件1.使用CSSresetCSSreset可以在不同的浏览器上保持一致的风格。可以使用CSS重置库Normalize等，也可以使用更简化的重置方法：*,*::before,*::after{box-sizing:border-box;保证金：0；padding:0;}现在element的margin和padding设置为0，box-sizing可以管理你的CSS盒模型布局。演示说明：如果您按照接下来介绍的关于继承box-sizing的技巧进行操作，则无需将box-sizing属性添加到上述代码中。2.Inheritbox-sizing从html元素继承box-sizing:html{box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}所以在插件或者其他组件中在.3.使用unset而不是重置所有属性重置元素的属性时，您不需要重置每个单独的属性：button{background:none;边框：无；颜色：继承；字体：继承；大纲：无；padding:0;}您可以使用all速记来指定所有元素的属性。将值设置为unset会将元素的属性更改为其初始值：button{all:unset;}注意：IE11不支持all速记，目前正在考虑支持Edge。IE11不支持取消设置。4.使用:not()选择器判断表单是否显示边框先给元素添加边框/*添加边框*/.navli{border-right:1pxsolid#666;}去掉边框lastelement/*Removetheborder*/.navli:last-child{border-right:none;}不要这样做，使用:not()伪类来达到同样的效果：.navli:not(:last-child){border-right:1pxsolid#666;}当然你也可以用.navli+li，但是:not()更清晰易读。Demo5.给body元素添加行高不需要给每个
,元素一个一个添加line-height，直接给body元素：body{line-height:1.5;}文本元素可以轻松继承身材风格。演示6.为表单元素设置:focus有视力的键盘用户依靠焦点来确定键盘事件在页面上的位置。使表单元素的焦点突出，然后与浏览器的默认实现对齐：a:focus,button:focus,input:focus,select:focus,textarea:focus{box-shadow:none;大纲：#000虚线2px；outline-offset:.05em;}Demo7.垂直居中任何元素否！这绝不是黑魔法，真的可以让任何元素垂直居中：html,body{height:100%;保证金：0；}正文{-webkit-align-items：中心；-ms-flex-align:居中；对齐项目：居中；显示：-webkit-flex；display:flex;}...和CSSGrid:body{display:grid;高度：100vh；保证金：0；place-items:centercenter;}这还不够吗？垂直的，水平的？任何元素，任何时间，任何地点？CSS-Tricks有一篇关于各种居中技术的好文章。注意：IE11对flexbox的支持有点问题。Demo8.逗号分隔列表让列表中的每一项都用逗号分隔：ul>li:not(:last-child)::after{content:",";}因为最后一项没有逗号，你可以使用:not()伪类。注意：此技巧对于可访问性而言并不理想，尤其是屏幕阅读器。而且复制粘贴并不会带走CSS生成的内容，需要注意。9、使用负nth-child来选择元素使用负nth-child来选择1到n个元素。li{display:none;}/*选择第1到第3个元素并显示*/li:nth-child(-n+3){display:block;}也许你已经掌握了如何使用:not()这个技巧，试试这个：/*选择除前3个之外的所有项目，并显示它们*/li:not(:nth-child(-n+3)){display:none;}如此简单！演示10.使用SVG图标没有理由不使用SVG图标：jpg或.gif-jif-whatev文件。注意：对于纯图标按钮，如果SVG加载不成功，以下样式有助于提高辅助功能：.no-svg.icon-only::after{content:attr(aria-label);}11.使用Thename"owl-like"选择器可能不熟悉，但是通用选择器(*)与相邻的兄弟选择器(+)一起工作得很好：*+*{margin-top:1.5em;}在这个例子中，所有相邻的兄弟元素在文档流中将有margin-top:1.5em样式集。更多“类似猫头鹰”的选择器，请参考HeydonPickering的文章AListApartDemonstration12.使用max-height创建一个纯CSS滑块max-height与overflowhidden一起创建一个纯CSS滑块：。滑块{最大高度：200px；溢出-y：隐藏；宽度：300px;}.slider:hover{最大高度：600px;overflow-y:scroll;}增加鼠标移入时slider元素的max-height值，可以显示overflow部分。13.创建等宽的网格table-layout:fixed可以保持每个网格等宽：.calendar{table-layout:fixed;}无痛表格布局。Demo14.使用Flexbox移除多余的边距不使用第nth-、first-和last-child来移除列之间的额外间隙，而是使用flexbox的space-between属性：.list{display:flex;justify-content:space-between;}.list.person{flex-basis:23%;}列之间的空间总是相等的。15、使用属性选择器选择空链接当元素没有文本内容但有href属性时，显示其href属性：a[href^="http"]:empty::before{content:attr(href);}很简单。演示16.为“默认”链接定义样式为“默认”链接定义样式：a[href]:not([class]){color:#008000;text-decoration:underline;}通过CMS系统插入的链接，通常不带class属性，上面的样式可以识别它们，不影响其他样式。17.一致的垂直节奏通用选择器（*）与元素一起使用，保持一致的垂直节奏：.intro>*{margin-bottom:1.25rem;}一致的垂直节奏可以提供视觉美感，增强可读性内容性。18.固定比例框要创建一个固定比例的框，您需要做的就是为div设置一个内边距：.container{height:0;底部填充：20%；position:relative;}.containerdiv{border:2pxdashed#ddd;高度：100%；左：0；位置：绝对；顶部：0；width:100%;}使用20%padding-bottom使盒子的高度等于其宽度的20%。无论视口宽度如何，子div都将保持其宽高比(100%/20%=5:1)。演示19.为损坏的图像设置样式只需一点CSS即可美化损坏的图像：img{display:block;字体系列：无衬线；字体粗细：300；高度：自动；行高：2；位置：相对；文本对齐：居中；width:100%;}添加伪元素以显示用户信息和URL引用：img::before{content:"我们很抱歉，下面的图像已损坏:(";display:block;margin-bottom:10px;}img::after{content:"(url:"attr(src)")";display:block;font-size:12px;}详细了解这个ClassstyleskillsIreAderinokun的原帖。20.使用rem调整全局大小；使用em调整局部大小在根元素上设置基本字体大小后(html{font-size:100%;})，使用em设置文本元素的字体大小：h2{font-size:2em;}p{font-size:1em;}然后设置模块的字体大小为rem:article{font-size:1.25rem;}aside.module{font-size:.9rem;}现在，每个模块变得独立，更简单，灵活的样式，便于维护。21.隐藏未静音，自动播放的电影这是自定义用户样式表的好技巧。避免自动播放。如果没有静音，则不会显示视频：video[autoplay]：not([muted]){display:none;}同样，我们利用:not()。22.使用选择器:root来控制字体弹性在响应式布局中，字体大小应该需要根据不同的视口进行调整。您可以使用以下方法根据视口高度和字体大小计算字体大小：root::root{font-size:calc(1vw+1vh+.5vmin);}现在，您可以使用rootembody{font:1rem/1.6sans-serif;}Demo23.为了更好的移动体验，为表单元素设置字体大小在触发
