CSS技巧二

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);
       }