css

### 盒子总h w 包含padding margin
  box-sizing:border-box;
  
### li 
  ul li{ list-style:none;}
 
### 溢出滚动且隐藏滚动条
  overflow-y:scroll; // 溢出滚动 （显示滚动条）
  ::-web-scrollbar:{ display:none;} // 隐藏滚动条

### 透明度
  opacity:0.5;  // 透明度(0-1)
  background: rgba(76, 175, 80, 0.3); // 背景颜色透明度30%
  
### 盒子阴影
  box-shadow:offset-x offset-y blur spread color position; 
  /*
  box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径（值越大越模糊） 阴影扩展半径（前提，存在模糊半径值越大扩展范围越大） 阴影颜色（rgba/#） 投影方式(可选默认外阴影，内阴影为inset)
  */
  
### 子盒子占满剩余宽度
  flex-grow:1;
  
### 图片等比缩放 且在盒子中 居中显示
  <div>
    <img src="xxx"/>
  </div>
  div{
    position:relative;
    width:500px;
    height:500px;
    border:1px solid red;
    box-sizing:border-box;
  }
  img{
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }

### 背景图片等比缩放
  background-image:url("");
  background-size:100% 100%;
  
###  动画属性
  animation-name:绑定的动画名
  animation-duration：完成此动画的周期需要s/ms
  animation-delay:动画开始播放需要等待的时长s/ms (-2s/2s)
  animation-iteration-count：动画播放次数
     n正整数，动画应该播放多少次
     infinite 循环播放
  animation-direction:是否循环/正反向播放动画
     reverse 动画反向播放
     alternate 动画奇数次正向播放 偶数次反向播放
     alternate-reverse 动画奇数次反向播放 偶数次正向播放
  animation-fill-mode: 当动画不播放时
  #box{
   animation: myMove 5s infinite; // 5s执行完毕 循环此动画
  }
  @keyframes myMove{ 
    from{ background-color:red}
    to{background-color:blue}
  }

### 动画停留在最后一帧
   animation-fill-mode:forwards;
   
### a
  a{ 
    text-decoreation:none; // 清除默认样式
    color:black; // 覆盖原有颜色
     // 四种状态：①未访问a:link ②已访问过a:visited ③鼠标停留a:hover ④鼠标点击后a:active
   }

     

flex

#### justify-content 对齐属性
 /* 父元素*/
 .box{
   width: 400px;
   height: 100px;
   display: flex;
   justify-content: space-between;
 }
 - justify-content:设置主轴方向上的对齐方式
   ① flex-start 起点对齐(默认值)
   ② flex-end 结尾对齐
   ③ center
   ④ space-between 间隔对齐，首尾没有间距
   ⑤ space-around  间隔对齐，首尾有间距
  
 

space-around space-between

#### flex-direction 主轴方向
.box{
  display:flex;
  flex-direction:
  ① row（默认 从左到右）
  ② row-reverse 
  ③ column 主轴方向从上到下
  ④ column-reverse 主轴方向从下到上
}

• flex-direction: column-reverse

• flex-direction: row-reverse

#### align-items 垂直方向属性
/* 父元素*/
.box{
  display:flex;
  align-items:
  ① center
  ② flex-start 顶部对齐
  ③ flex-end   底部对齐
  ④ stretch （默认）拉伸flex填充 (box width：none)
  ⑤ baseline 基线对齐

![reverse.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1287d829bbe64168bbb4a743fac81247~tplv-k3u1fbpfcp-watermark.image?)
}
#### align-content 对齐弹性线
.box{
  display:flex;
  align-content:
  ① space-between 首尾无空格
  ② space-around 首尾有空格
  ③ center
  ④ flex-start
  ⑤ flex-end 

}

#### flex居中
  display: flex;
  justify-content: center;
  align-items: center;

• align-content:flex-start
• align-content:flex-end
• align-content:center

#### flex-warp 换行属性
/* 父元素*/
.box{
  display:flex;
  ① nowarp 默认不换行
  ② warp 换行
}