了解完下面这些 助您提高CSS开发能力 时间：2017-03-31     来源：CSS开发小赢家

作为一名web前端工程师，CSS开发是我们的必修课。我们一定能够做到熟练掌握CSS开发才能算得上一名合格的web前端工程师，你的CSS开发能力如何呢?是不是有点心虚了?别急，看完华清远见CSS开发技术频道为您分享的文章，你的CSS开发能力肯定能够有所提升的。

1 .使用:not()给导航条添加间隔线

.nav li:not(:last-child) {

border-right: 1px solid #666;

}

或者，我们增加左边框。

.nav li:first-child ~ li {

border-left: 1px solid #666;

}

2 .给body元素增加Line-Height属性

我们不需要给每个p、h1元素设置line-height，只需要给body元素设置，其他文本元素会自动继承body的特性。

body {

line-height: 1;

}

3. 任意元素垂直居中

不是黑魔法，确实可以让任意元素垂直居中。

html, body {

height: 100%;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

4.使用svg图标

没有理由不使用svg图标，在大多数分辨率和浏览器里能够实现缩放，甚至兼容到IE9，所以不用再用.png、.gif等等。

.logo {

background: url("logo.svg");

}

5.文本显示优化

一些字体不能再所有设备中优展示，所以需要设置。

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

注意optimizeLegibility属性值的使用问题，同时IE/Edge不支持text-rendering。

6.在Pure CSS Sliders中使用max-height实现隐藏、显示的动画。

.slider ul {

max-height: 0;

overlow: hidden;

}

.slider:hover ul {

max-height: 1000px;

transition: .3s ease;

}

7.初始化box-sizing

从html中继承box-sizing属性，这样的话，后期维护比较方便。

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

8.表格单元格等宽

.calendar {

table-layout: fixed;

}

9在实现侧栏时，我们不再需要各种nth-、first-和last-child等设置margin，可以使用Flexbox轻松实现均匀分布。

.list {

display: flex;

justify-content: space-between;

}

.list .person {

flex-basis: 23%;

}