空白折叠

所谓「空白折叠」其实是 HTML 代码在编辑器中回车换行后产生的，因为在浏览器渲染时，多个空白符会被合并成一个空格字符进行渲染。空白折叠只会出现在行盒与行块盒排列中

阴影

box-shadow无法覆盖伪元素的小三角，但是filter的drop-shadow可以

不占用空间的边框

利用shadow实现

box-shadow: inset 0 0 0 1px rgb(167 139 250);

文字排列方向

高度自动的过渡效果

图片高度占位

grid布局

flex流式布局

三列布局

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  gap: 1rem;
}
.flex:nth-child(3n + 3) {
  margin-right: 0;
}
.f-child {
  width: calc((100% - 2rem) / 3);
  box-sizing: border-box;
}