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;
}
//文檔流中的所有相鄰兄弟元素都將設(shè)置margin-top
5.利用flexbox自動設(shè)置間距
*{
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來控制字體彈性
//在響應式布局中，字體大小需要根據(jù)不同的視口進行調(diào)整，你可以計算字體大小根據(jù)視口高度的字體大小和高度，這時需要用到：root
：root {
font-size
:calc(1vw+1vh+ .5vmin);
}
