css学习笔记

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%;
}