虽菜但瘾

在看了B站up主阿阳热爱前端的一个HTML+CSS教程实例后，跟着做了一遍，具体的代码和效果如下：效果： 昼夜交替源码： 阿阳热爱前端 / alternately对于此篇，我只是总结我学到或需要复习的一些知识点，可能价值并不大。flex布局具体详细介绍，请移步阮一峰的网络日志。flex布局即为弹性布局，为盒状模型提供灵活性，其子元素会成为容器成员。内置的属性能够实现页面元素垂直水平居中。定位在网页中实现列式布局，将一切元素设为盒子，就要实现对盒子位置的控制。相对定位：rel

所谓雪碧图就是讲很多小图标放在一张图上。其是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。这样做的好处将多张图片合并到一张图片中，可以减小图片的总大小将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗使用时只需要调整图床的位置，使用background-position来定位。 <div> <li class="cat1"><i&gt