1.遮罩的实现
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 99999;
background-color: rgba(0, 0, 0, .6);
display: none;
}
2.盒子水平垂直居中
.box-center {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
3.一行文本溢出隐藏
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
4.吸顶处理
position: fixed;
width: 100%;
height: 160rpx;
padding-top: 90rpx;
box-sizing: border-box;
font-size: 34rpx;
text-align: center;
line-height:160rpx;
background-color: #ffffff;
box-shadow: 0rpx 8rpx 10rpx #DDDDDD;
z-index: 99999999;
opacity: 1;
5.伪元素的使用(每行五个)
stylus写法
.push
width: 18%;
margin-right: 2.5%
&:nth-child(5n)
margin-right 0
css写法
.push-item:nth-child(5n) {
margin-right 0
}
6.一行文本省略功能
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;