本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果： 上面的动画效果，非常有意思，核心有两点： 小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果 小球在碰撞边界

之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2…

突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而，时间久了已经不记得（换句话说是不理解）为啥要提出这个布局了，昨天在 SF 上发起了一个提问，但良久未有人答复，幸得@王能全是谁 提醒，终于回想起「双飞翼」的完整意义了。谨以此文…

CSS设置居中的方案总结，主要是垂直居中的梳理。最后改于2021年2月4日，根据目前常用的方案进行了调整。

对于BFC的概念以及应用场景一直都不是很明白，今天着重去了解了一下，做了以下总结。 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素…