学习Vue3,总结的css样式

1.鼠标选中元素移动

   a {
   	  //在对应的元素下添加以下代码
      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
      display: block;
      width: 200px;
      text-align: center;
      padding: 10px;
}

2.在一行字中加一竖

代码

a{
      //line-height: 1;
      padding: 0 10px;
      color: #999;
      display: inline-block;
      加以下代码
      ~a {
        border-left: 1px solid #ccc;
      }
    }

3.将元素单行变多行

启用弹性项目换行
默认情况下，弹性容器仅显示弹性项目的单行或单列。但是flex-wrap如果在一条伸缩行上没有足够的空间，则可以使用flex容器上的属性来指定其伸缩项是否换成多行。
该flex-wrap属性接受以下值：

1. nowrap-默认值。伸缩项目放在一行中。如果伸缩线上没有足够的空间，则可能会导致溢出。
2. wrap — flex容器将其flex项目分解为多行，类似于文本太宽而无法容纳在当前行上时如何将其分解到新行上。
3. wrap-reverse —伸缩项目将在必要时进行换行，但顺序相反，即，交叉起点(cross-start)和交叉终点(cross-end)方向会互换。

    .drop-down-div{
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
    }