mwl_learning的博客

01 Grid 布局简介Grid 布局将网页划分成行和列从而形成一个个网格，可以任意组合成不同的网格。容器：采用 Grid 布局的元素，称为 Grid 容器(Grid container)，简称容器。项目：采用 Grid 布局的元素的所有子元素自动成为容器成员，称为 Grid 项目(Grid item)，简称项目。项目只能是容器的顶层子元素，不包含项目的子元素。单元格：行和列分割出来的区域叫做单元格（cell）。网格线：划分容器区域的线，被称为网格线(grid line)。网格线是从 1 开

01 Flex 布局简介Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 Flex 布局.设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效.采用 Flex 布局的元素，称为 Flex 容器(flex container)，简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目(flex item)，简称项目。项目只能是容器的顶层子元素，不包含项目的子元素。容器默认

01 BFC 简介BFC(Block Formatting Context) 块格式化上下文BFC 是一个独立的区域，是块盒子的布局发生的的区域，也是浮动元素和其他元素交互的区域。02 父元素触发 BFC 的情况：根元素浮动元素(float 不是 none)绝对定位元素(position 为 absolute 或 fixed)display 为以下属性值的元素:行内块 inline-block,表格单元格 table-cell,表格标题 table-caption,匿名表格单元

00 需求背景在实现一个动画的时候，一般情况下会使用setTimeout方法。但是 setTimeout方法容易出现卡顿、抖动的现象，原因是：01 setTimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；02 setTimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。01 requestAnimationFrame该方法告诉浏览器需要执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需