为body添加行高
,等每个元素都不需要添加行高，而是添加到body:body{line-height:1;}在这个这样，文本元素可以很容易地从正文中继承。使用:not()添加/删除导航上不需要的边框/addborder/.navli{border-right:1pxsolid#666;}...然后移除最后一个元素的边框.../removeborder/.navli:last-child{border-right:none;}...使用伪类:not()仅将样式应用于您需要的元素：.navli:not(:last-child){border-right:1pxsolid#666;}当然，您可以使用.navli+li或.navli:first-child~li，但使用:not()的意图特别明确，CSS选择器以人类描述的方式定义边框。垂直居中任何元素不，这不是黑魔法，你可以垂直居中任何元素：html,body{height:100%;保证金：0；}正文{-webkit-align-items：中心；-ms-flex-align：居中；对齐项目：居中；显示：-webkit-flex；display:flex;}想居中其他元素？垂直、水平……任何时间、任何地点？有一篇关于CSS-Tricks的好文章可以完成这一切。注意：在IE11上flexbox的一些错误行为。逗号分隔列表使列表看起来更像真正的逗号分隔列表：ul>li:not(:last-child)::after{content:",";}使用伪类:not()所以最后一个元素不是逗号附加的。使用负数nth-child选择元素在CSS中，使用负数nth-child来选择从1到n的元素。li{display:none;}/*选择元素1到3并显示它们*/li:nth-child(-n+3){display:block;}或者，你已经了解了一些关于使用:not(),Try:/*选择项目1到3并显示它们*//*选择项目1到3并显示它们*/li:not(:nth-child(-n+3)){display:none;}使用SVGicons.logo{background:url("logo.svg");}SVG对所有分辨率类型都有很好的扩展性，IE9以上的浏览器都支持。所以放弃任何文件，如.png、.jpg或gif-jif。注意：如果您使用SVG图标按钮并且SVG无法加载，以下内容可以帮助您保持可访问性：.no-svg.icon-only:after{content:attr(aria-label);}未在所有设备上优化，所以让设备浏览器帮助：html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing：抗锯齿；text-rendering:optimizeLegibility;}注意：请使用optimizeLegibility。此外，IE/Edge不支持文本渲染。Inheritbox-sizingInheritbox-sizingfromhtml:html{box-sizing:border-box;}*:before,*:after{box-sizing:inherit;}这使得使用其他行为的插件或组件很容易改变盒子大小。表格单元格宽度相等使用表格会很痛苦，因此使用table-layout:fixed来保持单元格宽度相同：.calendar{table-layout:fixed;}无痛表格布局。使用Flexbox摆脱边界Hack当使用列约束时，你可以放弃nth-，first-和last-childhacks，并使用flexbox的space-between属性：.list{display:flex;justify-content:space-between;}.list.person{flex-basis:23%;}列约束现在始终等距。漂亮的背景渐变体{background-image:linear-gradient(-25deg,#70FFA80,#00D3FF61%,#29A2FF100%)}参考：前端开发者应该知道的CSS技巧*CSS黑魔法技巧，让你少写不必要的JS，代码更优雅*
