css小技巧

一、移动端文字水平垂直对齐

justify-content: center;
align-items: center;

二、单行文本省略号表示

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

三、多行文本省略号表示

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

四、盒子内部排列方式

 display: flex;
 flex-direction: column;  // 属性规定灵活项目的方向
 justify-content: space-around; // 用于设置或检索弹性盒						子元素在主轴（横轴）方向上的对齐方式

五、浮动清除

html

<div class="clearfix">
    <div></div>
    <div></div>
</div>

1、父盒子

.clearfix::before, 
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
} 

2、子盒子

float