1.使用：not()选择器来决定表单是否显示边框
//习惯写法：
.nav li{
border-right:1px solid #666;
}
.nav li:last-child{
border-right:none;
}
//上面写法不好，可以这么简写(注意：：not 不兼容ie8)
.nav li:not(:last-child){
border-right:1px solid #666;
}
2.为body的文本元素添加行高
//不必为每一个p，h，元素逐一添加line-height，直接添加到body元素：
body {
line-height:1.5;
}
//文本元素可以很容易的继承body的样式
3.使用逗号分隔列表
ul > li:not(:last-child)::after{
content:",";
}
4.使用“形似猫头鹰”的选择器
//通用选择器（*）和相邻兄弟选择器（+）一起使用，效果非凡：
* + * {
margin-top:1.5em;
}
//文档流中的所有相邻兄弟元素都将设置margin-top
5.利用flexbox自动设置间距
*{
margin: 0;
padding: 0;
}
ul{
display: flex;
justify-content: space-between;
width:500px;
height:120px;
border: 1px solid #000;
}
ul li{
list-style: none;
/*height:100px;*/
background-color: teal;
flex-basis: 23%;
}
<!--justify-content:不兼容IE11+，移动端可用 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
6.使用选择器：root来控制字体弹性
//在响应式布局中，字体大小需要根据不同的视口进行调整，你可以计算字体大小根据视口高度的字体大小和高度，这时需要用到：root
：root {
font-size
:calc(1vw+1vh+ .5vmin);
}
