原文链接:https://juejin.im/post/5d3eca78e51d4561cb5dde12

1. display: flow-root

用于消除float带来的元素溢出容器情况
flow-root.gif

2. flex-grow属性

flex设置均分时,可以再每个item设置flex-grow:1 其效果与grid的1fr相似
应用场景: 参考之前的顶部select,多个select可能为均分情况

3. 相对定位同时设置left,right可以赋予其宽度

left-right.gif

4. 相邻兄弟选择器

相邻兄弟选择器.gif
可以用于卡片设置中,最下面的卡片或者最上面的卡片没有某个属性

5.outline使用

如图片的外边框,用border可能会有问题(作为容器)
outline.gif

6. object-fit

object-fit.gif

7. button-disable

除了可以设置颜色背景 还可以设置cursor
button-disable.gif

8. 模态框-背景虚化

背景虚化.gif

9. 自定义属性实现进度条

自定义属性实现进度条.gif

10. 渐变实现进度条

渐变实现进度条.gif

11. outline妙用

结合margin负数,和outline-offset负数,可以实现很多意想不到的效果
outline妙用.gif

12.table

table.gif