同樣都是一些基礎知識點，列出來輔助記憶，今後遇到的也都收納至此篇。

單行超出省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行超出省略

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

元件保持寬高比

使用視窗單位，使用場景：全屏遮罩層、自定義彈出檢視等。

• vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
• vh：視窗高度的百分比
• vmin：當前 vw 和 vh 中較小的一個值
• vmax：當前 vw 和 vh 中較大的一個值

使用 flex 實現左右元件相適應，使總寬度不變

<div class="wrap">
    <div class="col fixed">
      name
    </div>
    <div class="col fluid">
      Nino
    </div>
    <div class="col fixed">
      country
    </div>
    <div class
 
="col fluid">
      China
    </div>
  </div>

div {
    height: 44px;
  }

  .wrap {
    display: flex;
    width: 500px;
    background: red;
  }

  .col {
    padding: 10px;
  }

  .fluid {
    flex: 1;
    background-color: #ccc;
  }

  .fixed {
    background-color: yellow;
    max-width
 
: 60px;
  }

使用 flex 實現水平垂直居中

<div class="scroe_wrap">
  <label class="score_number">134</label>
  <label class="score_lab">數學成績</label>
</div>

.scroe_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  background: lightcyan;
}

.score_number {
  font-family: 'DINCond';
  font-size: 60rpx;
  color: #313131;
}

.score_lab {
  font-size: 24rpx;
  color: #898989;
}

自適應圖片寬高保證圖片不變形

只需設定 object-fit: cover

object-fit 類似於 iOS 裡的contentMode屬性

object-fit 的其他值

fill 被替換的內容大小可以填充元素的內容框。 整個物件將完全填充此框。 如果物件的高寬比不匹配其框的寬高比，那麼該物件將被拉伸以適應。 contain 被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個物件在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該物件將被新增“黑邊”。 cover 被替換的內容大小保持其寬高比，同時填充元素的整個內容框。 如果物件的寬高比與盒子的寬高比不匹配，該物件將被剪裁以適應。 none 被替換的內容尺寸不會被改變。 scale-down 內容的尺寸就像是指定了none或contain，取決於哪一個將導致更小的物件尺寸。

CSS 中的換行

強制不換行 white-space: nowrap; 自動換行 word-wrap: break-word; 強制英文單詞斷行 word-break: break-all;