自律小屋空白折叠
所谓「空白折叠」其实是 HTML 代码在编辑器中回车换行后产生的，因为在浏览器渲染时，多个空白符会被合并成一个空格字符进行渲染。空白折叠只会出现在行盒与行块盒排列中
阴影
box-shadow无法覆盖伪元素的小三角，但是filter的drop-shadow可以
不占用空间的边框
利用shadow实现
css
box-shadow: inset 0 0 0 1px rgb(167 139 250);文字排列方向
高度自动的过渡效果
图片高度占位
grid布局
flex流式布局
三列布局
css
.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;
}