css 样式

就记录，脑子笨

强制换行

      //宽度要固定   
      // 强制不换行，超出显示...  
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    
    // 自动换行,最多显示4行
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden; 
    
    // 区别
    word-wrap: break-word;      // 自动换行
    word-break: break-all;      // 英文强制换行

图片显示样式

// 图片显示样式 - 平铺
object-fit: cover;

关于滚动条样式

// 修改组件中滚动条宽度  ::前加上组件class
.slider::-webkit-scrollbar{
  width:8px;
  background-color: #00000040;
}
.slider::-webkit-scrollbar-thumb{
  border-radius:4px;
  background-color: #00000040;
}
.slider::-webkit-scrollbar-track{
  background-color:transparent;
 }

// 全局修改, 在app.vue中或者main.js中引入
::-webkit-scrollbar{
  width:8px;
  background-color: #00000040;
}
::-webkit-scrollbar-thumb{
  border-radius:4px;
  background-color: #00000040;
}
::-webkit-scrollbar-track{
  background-color:transparent;
 }

关于hover事件

// 关于hover事件
// 父对子
<div class="div1">
    <p class="p1">hello, world</p>
</div>

.div1 {
  background-color: red;
  width: 200px;
  height: 200px;
  .p1 {
  color: white;
  }
}

.div1:hover .p1 {
  color: black;
}

// 同级
<div class="div1">
    div1
</div>
<p class="p1">
    p1
</p>
<p class="p1">
    p2
</p>

.div1 {
    background-color: red;
    width: 200px;
    height: 200px;
}
.p1 {
    color: black;
    width: 100px;
    height: 100px;
    background-color: orange;
}

// 同级之间，控制兄弟元素，~控制后面所有的兄弟元素
.div1:hover ~.p1 {
  background-color: white;
}

// 同级之间，控制兄弟元素，但是只能控制一个，并且是相邻的后面元素
.div1:hover +.p1 {
  background-color: white;
}