1. 元素隐藏后，当鼠标放在某处其显示出来
<li class="nav-pop">
<div class="qr-pop">
</div>
</li>
qr-pop是隐藏的，当鼠标放在nav-pop上，qr-pop显示出来
.nav-pop:hover .qr-pop{
display: block;
}
.qr-pop{
display: none;
}
2. 阴影
box-shadow: 0 -12px 10px rgba(0,0,0,.2); /* (左右有阴影) */
3.文本相关
text-indent:5px;/*缩进 5 像素*/
white-space: nowrap;/*不换行*/
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*显示不全就用...*/
4. 一行两个分布在两端，左边自适应宽度，右边固定宽度
<div class="app">
<div class="left"></div>
<div class="right"></div>
</div>
1、flex布局
首先设置display: flex，让2个盒子一行显示，设置右边的固定宽度···px，然后设置左边flex：1，自动填满剩余空间。
.app{
display: flex;
}
.left{
flex: 1;
}
.right{
width:100px;
}
2、利用定位+overflow
右边盒子position：absolute(或者fixed)，左边盒子overflow：hidden
.left{
overflow: hidden;
}
.right{
position：absolute;
right:0;
top:0;
width:100px;
}
5. 子容器居中父容器
在父容器内写
.app{
display: flex;
align-items: center;
justify-content: center;
}
6. display布局，justify-content: space-between 自动换行并且左对齐
父容器
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
7. 修改第三方框架的css，需要用/deep/
/deep/.u-popup__content{
max-width: 90%;
}
