本文是 Flexbox 系列的最后一篇文章。文本我将花时间说明 Flexbox 的使用场景，而且我们现在还有 Grid 布局，我会对如何在他们之间做选择和各的使用场景做些说明和建议。 如果你还没有读这个系列的其他文章的话，现在可以先去看看一下。我先讲了 当我们在使用 displ…

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…

cover 网页内容完全覆盖可视窗口，即页面完全充满屏幕，右图。适配关键！ 适配的核心是：通过 constant() 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit在iOS11中新增CSS Functions: en…