粘性定位

好久没发博客啦这里萌芽～ 今天做了个小练习前来总结一下！成品图不是特别好看凑合一下，老规矩代码会放在最后。

练习总结笔记 

1. position: sticky 粘性定位

2. 利用flex(伪)瀑布流展示图片

3. css计算属性 calc()

4. 雪碧图截取icon

粘性定位

之前对定位没有一个笼统的学习，大多数情况下用relative，absolute，fixed就够用了，直到今天看了阮一峰老师的总结发现了个好玩的【position: sticky】粘性布局可以说是relative + fixed的结合体，在定义这个属性后必须给它定义他的位置(top、bottom、left、right至少给一个)，否则将会无法生效。它会随着滚动条的滚动然后贴在给他固定的位置，画个图大概是这种感觉。
当滚动条一直往下滚div2到达了top0的时候就会变成fixed死死的固定在最上面！
在一些特殊的场景下非常的好用。感谢阮一峰老师定位详解笔记！普及到了新的知识点！
CSS 定位详解：http://www.ruanyifeng.com/blog/2019/11/css-position.html

flex(伪)瀑布流展示图片

为什么要说是(伪)瀑布流呢？因为这种方式在数据量比较大的时候并不推荐使用！会出问题的，在数据量固定且数量少的时候可以这么写着玩玩。大概逻辑就是开始flex布局的竖轴模式然后把内容分成三份展示，这里萌芽其实也是有参考的，感兴趣的小伙伴可以去看一下这位大佬的博客。
3种方式实现瀑布流布局：