提高您CSS开发能力的技巧集 本是古典 何须时尚 2022-08-09 03:16 101阅读 0赞 # **0. 目录** # * 目录 * 引言 * 正文 * 1 使用not给导航条添加间隔线 * 2 给body元素增加Line-Height属性 * 3 任意元素垂直居中 * 4 逗号分隔的列表 * 5 在nth-child中使用负数 * 6 使用svg图标 * 7 文本显示优化 * 8 在Pure CSS Sliders中使用max-height * 9 初始化box-sizing * 10 表格单元格等宽 * 11 使用Flexbox摆脱各种Margin Hacks * 12 给空连接使用属性选择符 * 声明 # **1. 引言** # 原文:[github][]的[A collection of useful CSS protips][] 译者:爱前端乐分享的FedFun,意译为主不当之处,欢迎指正! 译言:提高您CSS开发能力的技巧集,希望对大家有所帮助。 # **2. 正文** # ## 2.1 使用`:not()`给导航条添加间隔线 ## 我们通常使用如下代码给导航条增加间隔线 /* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } 现在,我们可以使用`:not()`选择符简化操作,代码简洁易读,不错吧。 .nav li:not(:last-child) { border-right: 1px solid #666; } 或者,我们增加左边框。 .nav li:first-child ~ li { border-left: 1px solid #666; } ## 2.2 给body元素增加Line-Height属性 ## 我们不需要给每个p、h1元素设置`line-height`,只需要给body元素设置,其他文本元素会自动继承body的特性。 body { line-height: 1; } ## 2.3 任意元素垂直居中 ## 不是黑魔法,确实可以让任意元素垂直居中。 html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } ## 2.4 逗号分隔的列表 ## 让html列表貌似现实中逗号分隔的列表 ul > li:not(:last-child)::after { content: ","; } ## 2.5 在`nth-child`中使用负数 ## 在css的`nth-child`中使用负数选择1~n条记录。 li { display: none; } /* select items 1 through 3 and display them */ li:nth-child(-n+3) { display: block; } ## 2.6 使用svg图标 ## 没有理由不使用svg图标,在大多数分辨率和浏览器里能够实现缩放,甚至兼容到IE9,所以不用再用.png、.gif等等。 .logo { background: url("logo.svg"); } ## 2.7 文本显示优化 ## 一些字体不能再所有设备中最优展示,所以需要设置。 html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } 注意`optimizeLegibility`属性值的使用问题,同时IE/Edge不支持`text-rendering`。 ## 2.8 在Pure CSS Sliders中使用max-height ## 使用max-height实现隐藏、显示的动画。 .slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; } 参见本博《[Auto值的CSS3 Transition解决方案][Auto_CSS3 Transition]》 ## 2.9 初始化`box-sizing` ## 从html中继承`box-sizing`属性,这样的话,后期维护比较方便。 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } ## 2.10 表格单元格等宽 ## .calendar { table-layout: fixed; } ## 2.11 使用Flexbox摆脱各种Margin Hacks ## 在实现侧栏时,我们不再需要各种`nth-`、`first-`和`last-child`等设置margin,可以使用Flexbox轻松实现均匀分布。 .list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; } ## 2.12 给空连接使用属性选择符 ## 对于那些拥有href属性但是内容为空的a,自动添加内容。 a[href^="http"]:empty::before { content: attr(href); } 非常方便,是吧。 # **3. 声明** # 爱前端,乐分享。前端痴王海庆的博客,希望与您共同进步。 博客之星评选正在进行,[投我一票][Link 1],感谢您的支持。 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接[http://blog.csdn.net/whqet/article/details/48997389][http_blog.csdn.net_whqet_article_details_48997389] 独立博客[http://whqet.github.io][http_whqet.github.io] 新浪微博[http://weibo.com/FedFun][http_weibo.com_FedFun] 极客头条[http://geek.csdn.net/user/publishlist/whqet][http_geek.csdn.net_user_publishlist_whqet] [github]: http://www.github.com/ [A collection of useful CSS protips]: https://github.com/AllThingsSmitty/css-protips [Auto_CSS3 Transition]: http://blog.csdn.net/whqet/article/details/23378641 [Link 1]: http://vote.blog.csdn.net/blogstar2015/candidate?username=whqet [http_blog.csdn.net_whqet_article_details_48997389]: http://blog.csdn.net/whqet/article/details/48997389 [http_whqet.github.io]: http://whqet.github.io [http_weibo.com_FedFun]: http://weibo.com/FedFun [http_geek.csdn.net_user_publishlist_whqet]: http://geek.csdn.net/user/publishlist/whqet
还没有评论,来说两句吧...