常用的代码片段(CSS篇)

超出两行显示省略号

display: -webkit-box;
/* -webkit-box-orient: vertical; */
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;//文字超宽度必须换行
white-space: pre-wrap;

纵向滚动不显示滚动条

    overflow: hidden;
    text-overflow: ellipsis;
    overflow-y: auto;

下拉展开的关键代码

@keyframes slide-down{
    0%{
        transform:scaleY(0);
    }
    100%{
        transform:scaleY(1);
    }
}
.selectData{
    animation: slide-down 0.3s;
    transform-origin: 100% 0 0;
}

flex快速让文字图片垂直居中

display: flex;
/*子元素靠中间排列*/
justify-content:center;
/*子元素垂直对齐*/
align-items: center;

盒阴影

box-shadow: 0 4rpx 8rpx 0 #999;

flex最小显示宽度和默认显示宽度

flex-grow:1;
min-width: 32%;

时间单位转时间戳
1s=60*1000
1h =60*60*60*1000 

flex让其中一项占据剩余空间（需要其他元素的值都是固定的）

flex:1;

按钮底部固定,留个窗口滚动

.import-cd-hscode-body{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 44px;
    position: relative;
    .scroll-window{
        width: 100%;
        // height: calc(100% - 44px);
        height: 100%;
        overflow-y: auto;
    }
    .bottom-buttons{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        
    }
}

Pre样式 

.preStyle{
    white-space:pre-line;     /*保留换行符，设置溢出换行*/
    white-space: pre-wrap;    /*保留换行符，不换行*/
    all:initial;              /*清除继承样式*/
}