CSS常用样式

flex垂直水平居中

.flex-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-wrap>.flex-item {
    flex: 1;
}

绝对定位居中

.is-Transformed {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

清除浮动

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

小三角

.triggle {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #fff;
}

.triggle-black {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid #000;
    display: inline-block;
    cursor: pointer;
}

.triggle-black.active {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

多行文本省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

less+rem适配

// 变量
// 适配主流设备
@adapterDeviceList:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px;
// 设备的种类
@len:length(@adapterDeviceList);
// 预设基准值
@baseFontSize:100px;
// 设计稿尺寸
@psdWidth:750px;

// 混入
// less中的index是从1开始的，比起索引，应该叫做序号
.adapterMixin(@index:1) when (@index<=@len){
    @media (min-width: extract(@adapterDeviceList,@index)) {
        html{
            font-size: @baseFontSize/@psdWidth*extract(@adapterDeviceList,@index);
        }
    }
    .adapterMixin(@index+1);
}

// 适配
.adapterMixin();