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);
}
网友评论