就記錄，腦子笨

強(qiáng)制換行

      //寬度要固定   
      // 強(qiáng)制不換行，超出顯示...  
      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; 
    
    // 區(qū)別
    word-wrap: break-word;      // 自動換行
    word-break: break-all;      // 英文強(qiáng)制換行

圖片顯示樣式

// 圖片顯示樣式 - 平鋪
object-fit: cover;

關(guān)于滾動條樣式

// 修改組件中滾動條寬度  ::前加上組件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;
 }

關(guān)于hover事件

// 關(guān)于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;
}