css常用功能

130 阅读1分钟

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-height160rpx;
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;