css之昼夜交替

在看了B站up主阿阳热爱前端的一个HTML+CSS教程实例后，跟着做了一遍，具体的代码和效果如下：

效果： 昼夜交替
源码： 阿阳热爱前端 / alternately

对于此篇，我只是总结我学到或需要复习的一些知识点，可能价值并不大。

---

flex布局

具体详细介绍，请移步阮一峰的网络日志。

flex布局即为弹性布局，为盒状模型提供灵活性，其子元素会成为容器成员。内置的属性能够实现页面元素垂直水平居中。

---

定位

在网页中实现列式布局，将一切元素设为盒子，就要实现对盒子位置的控制。

• 相对定位：relative
  设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。