本文思维导图，欢迎补充 本文首发于我的个人网站：http://cherryblog.site 前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 C…

栅格就是网格，我们很小就会接触到网格，比如小时候的方格本作文本，画的表格等等，利用表格进行分类排版。UI中的栅格系统就是对各个平台的网格布局进行系统化，比如网页的网格定义，APP的网格定义。 栅格化系统是设计的一个基本原则，能够有规律的排版页面的布局，在CSS的Bootstra…

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…

在面试中我们经常会被问到一个简单的问题，那就是"实现一个三栏布局，左右固定，中间自适应"。这个问题就是考察知识点就是页面布局，我们是实际的项目开发中，也经常会遇到这个问题。其实我发现一个前端开发人员有一个通病，包括我自己也是，"觉得CSS不是很重要，不需要深入的学习"，这其实是…

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

1. Flex布局 接下来，我们先提出两个概念：剩余空间和溢出空间，具体是什么意思我们后面慢慢解释。 2. flex-grow 传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父…