样式片段

左右布局

<div class="g-app-wrapper">
  <div class="g-sidebar"></div>
  <div class="g-main"></div>
</div>

.g-app-wrapper {
  display: flex;
  min-width: 1200px;
}
.g-sidebar {
  flex-basis: 250px;
  margin-right: 10px;
}
.g-main {
  flex-grow: 1;
}

---

上下布局

<div class="g-container">
  <div class="g-real-box"></div>
  <div class="g-footer"></div>
</div>

.g-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.g-footer {
  margin-top: auto;
  flex-shrink: 0;
  height: 30px;
  background: deeppink;
}

---

单行省略、多行省略

 {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

---

img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 50% 100%; /* x y 轴 默认 50% 50% */
}

---

dpr = 1 2 3 使用多倍图

<img
  src="photo.png"
  sizes="(min-width: 600px) 600px, 300px"
  srcset="photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w"
/>

---

图片加载失败 添加 class 然后加伪元素占位图

<img src="test.png" alt="图片描述" onerror="this.classList.add('error');" />

---

平滑滚动 滚动容器：

.scroll-container {
  scroll-behavior: smooth;
}

---

点击一次即可选中一块文本

.g-select-all {
  user-select: all; /* none 禁止双击选择 */
}

---