提高您CSS开发能力的技巧集

本是古典何须时尚 2022-08-09 03:16 108阅读 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