1、flex 实现九宫格布局

flex: 0 0 calc(20% - 10px);

• flex-grow: 0：指定弹性盒项不会放大，即不会占据额外的空间。
• flex-shrink: 0：指定弹性盒项不会缩小，即不会缩小占据的空间。
• flex-basis: calc(20% - 10px)：指定弹性盒项的初始大小。在这里，使用 calc() 函数来计算初始大小，该计算结果为占据父元素宽度的 20% 减去 10 像素的宽度。

2、水平居中/垂直居中/水平垂直居中

• position： transform: translate(-50%, -50%)

• flex: justify-content: center; align-items: center;

3、画一条 0.5px 的直线

4、穿透样式总结

• css可以使用>>>，/deep/，::v-deep
• less和node-sass可以使用/deep/，::v-deep
• dart-sass可以使用::v-deep
• vue2.7以上版本以及包括vue3，应该使用:deep()