​

inline-block:用了之后会有间隙，可以把他放到一排，就可以了没有空隙了

vertical-align:必须作用与inline-block类型，改变的是对齐方式，不是垂直居中的，可以加行高实现对齐；

z-index:根据其数值的大小对齐，大的居上

关于透明度：opacity:background:rgba(R,G,B,透明度)

当单图片撑开不能对齐的时候，可以设置：vertical-align：middle(中线对齐)

flex布局：

justify-content: 属性：flex-start(开始对齐) flex-end(结尾对齐) center(中间对齐) space-between(两端对齐) space-around(自动分配间隔)

主轴变换：flow-diration:row(横着的) column(竖着对齐)---实现flex布局

display:flex;

fiex-direction:row/column;

justify-content:flex-start(开始对齐) flex-end(结尾对齐) center(中间对齐) space-between(两端对齐) space-around(自动分配间隔)

flex-wrap:wrap(实现换行) 默认不会主动换行；wrap-reverse(换行就会换到上面一排)

align-items:stretch/center/flex-start/baseline/flex-end(设置交叉轴)

flex-grow:1(会对父元素剩余空间进行瓜分)

flex-shrink

下拉菜单：

 *{
      margin: 0;
      padding: 0;
  }
  #menum{
       width: 100px;
      height: 30px;
      border: 1px solid #0f0f0f;
​
​
  }
 #menum ul{
     list-style: none;
      border: 1px solid #00000f; width: 100px;
      position: absolute;   top:30px; background: white;
     display: none;
  }
#menum  ul li{
      text-align: left;
      list-style: none;
  }
#menum:hover ul{
    display: block;
}
  #menum ul li:hover{
      color: #55a532;
  }

​

 

​