css样式

居中的方式
1.
 display: flex;
 align-items: center;
 justify-content: center;
2.
text-align:center;
3.
margin:0 auto
4.
父级
display: table;
子集
display: table-cell;
text-align: center;
vertical-align: middle;
5.
高度是多少就改多少
line-heigth:40px
6.
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
7.
 position: absolute;
 top: calc(50% - 50px);
 left: calc(50% - 150px);
8.
计算方式居中
 position: absolute;
 top: calc(50% - 50px);
 left: calc(50% - 150px);

独占一行
display:inline-block;

超出显示三个点
单行超出显示
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
多行超出显示
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

弹性盒布局
1.
display: flex
flex-direction:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

float 浮动布局
float:left 左
float:right 右

一堆文字有段落没有标签，可以设置这个样式
white-space：
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。