好久没发博客啦这里萌芽~ 今天做了个小练习前来总结一下!成品图不是特别好看凑合一下,老规矩代码会放在最后。
练习总结笔记
position: sticky 粘性定位
利用flex(伪)瀑布流展示图片
css计算属性 calc()
雪碧图截取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种方式实现瀑布流布局: