一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …

什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting m…

最近刚接触前端开发，接手了一个移动端H5项目。着实体会掉了前端的坑之多，和H5移动端的坑之多多。 介绍方案之前，首先还是交代一下项目背景与需求，毕竟一切方案也不能脱离实际需求。 总的来说主流的方案有rem和vh两种。 rem（font size of the root elem…

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思…

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来…

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…

备注：1、设置flex-wrap：wrap，不然默认nowrap按照比例排满一行。 有不足之处，请评论留言... 谢谢

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

上周，我写的 Flex专题 被阮一峰的「每周分享第 48 期」收录，然后 仓库 就登上了子类的 GitHub Trending (流量太可怕了😅)。 这一次是Flex专题的姊妹篇Grid专题。正巧昨天阮一峰也发布了 Grid 布局教程，大家可以切换着看呐 (我觉得我的写得更好…