优秀的程序员web前端教程分享CSS技巧！现在学习web的人越来越多，小白的问题也越来越多，那么今天就给大家分享一下CSS学习技巧！css的使用离不开web前端的工作。为了帮助大家提高css的使用技巧，一起来看看吧！1.使用：not()添加/删除导航边框。很多人会这样给navigation添加边框，然后取消最后一个：/addborder/.navli{border-right:1pxsolid#666;}/removeborder/.navli:last-child{border-right:none;}实际上，使用CSS:not()可以简化为如下代码：.navli:not(:last-child){border-right:1pxsolid#666;}当然，你也可以使用.navli+li甚至.navli:first-child~li，但使用:not()会使意图更加明确。2.给body添加line-height属性
和不需要分别添加line-height属性，相反，只需要给body添加line-height属性即可：body{line-height:1;}像这样，文本元素可以很容易地从body继承这个属性。3.垂直居中这不是魔术，你可以垂直居中任何元素：html,body{height:100%;margin:0;}body{-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-flex;display:flex;}需要别的吗？水平居中，垂直居中，随时随地？查看这篇CSS技巧文章。注意：flexbox在IE11下有一些bug。4.使用逗号分隔的列表使列表看起来像被逗号分隔：ul>li:not(:last-child)::after{content:",";}通过:not()伪类后跟一个逗号。5、使用负nth-child选择元素使用负nth-child选择1到n之间的元素：li{display:none;}/选择第一个到第三个元素并显示/li:nth-child(-n+3){display:block;}当然，如果你懂:not()，你也可以这样做：li:not(:nth-child(-n+3)){display:none;}是不是很简单的？6.使用SVG作为图标没有理由不使用SVG作为图标：.jpg、.gif文件。注意：以下代码可以提高使用辅助设备上网的用户的可访问性：.no-svg.icon-only:after{content:attr(aria-label);}7.文字显示优化有时字体不合适forallDevicesdisplayedwiththebesteffect,所以使用浏览器帮助：html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}8.使用max-height实现纯CSS幻灯片使用max-height和over-hidden实现纯CSS幻灯片：.sliderul{max-height:0;overlow:hidden;}.slider:hoverul{max-height:1000px;transition:.3秒轻松；/animatetomax-height/}9.继承box-sizing让box-sizing继承自html：这样可以更容易地修改插件或其他组件中的box-sizing属性。10.设置table.calendar的宽度相同{table-layout:fixed;}11.使用Flexbox避免MarginHacks在做多列布局时，可以使用Flexbox的space-between属性来避免nth-,first-,last-Hackssuchaschild:.list{display:flex;justify-content:space-between;}.list.person{flex-basis:23%;}这样，列之间的空白就会被均匀填充。12.对空链接使用属性选择器。当没有文字且href不为空时，显示链接：a[href^="http"]:empty::before{content:attr(href);}
