2020年7月29日
何时发生回流
摘要： 回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况： 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等） 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。 页面一开始 阅读全文
posted @ 2020-07-29 19:03 LangZ- 阅读(189) 评论(0) 推荐(0) 编辑
浏览器渲染过程
摘要： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对 阅读全文
posted @ 2020-07-29 19:00 LangZ- 阅读(141) 评论(0) 推荐(0) 编辑
触发BFC
摘要： 根元素 float的值不为none overflow的值不为visible display的值为table-cell、tabble-caption和inline-block之一 position的值不为static或则releative中的任何一个 阅读全文
posted @ 2020-07-29 18:10 LangZ- 阅读(93) 评论(0) 推荐(0) 编辑
2020年7月28日
扁平化数组
摘要： 1.使用flat()方法 参数为想要扁平的层数，默认为1，使用Ifinity则不管嵌套多少层都转化成一维数组 2.使用reduce()递归 function bianpinghua(arr) { return arr.reduce((result, item) => { return result. 阅读全文
posted @ 2020-07-28 12:44 LangZ- 阅读(157) 评论(0) 推荐(0) 编辑
2020年7月24日
三列布局
摘要： 1.圣杯布局 整体思路： 中间列放在最前优先加载，并设置宽度100%自适应； 三列都向左浮动 (此时左右列在下面一行，因为中间列占100%)； 左列设置margin-left：-100%，右列设置margin-left:-宽度，使左右列与中间列同行 (此时左右列会遮挡中间列内容)； 给最外部cont 阅读全文
posted @ 2020-07-24 23:11 LangZ- 阅读(192) 评论(0) 推荐(0) 编辑
2020年7月22日
事件循环，宏任务，微任务
摘要： https://juejin.im/post/59e85eebf265da430d571f89 讲的好明白啊啊啊啊 阅读全文
posted @ 2020-07-22 00:47 LangZ- 阅读(123) 评论(0) 推荐(0) 编辑
2020年7月14日
导入和导出
摘要： 导出： 在声明一个 class/function/… 之前： export [default] class/function/variable ... 独立的导出： export {x [as y], ...}. 重新导出： export {x [as y], ...} from "module" 阅读全文
posted @ 2020-07-14 22:46 LangZ- 阅读(146) 评论(0) 推荐(0) 编辑
2020年7月11日
事件委托实现树形菜单
摘要： HTML： <ul class="tree" id="tree"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li> <li>Donkeys</li> <li>Dogs</li> <li>Tigers</li> </ul> </li> <li>Other 阅读全文
posted @ 2020-07-11 20:13 LangZ- 阅读(198) 评论(0) 推荐(0) 编辑
事件委托实现关闭模块
摘要： HTML: container中有三个pane，点击按钮pane会消失 <div id="container"> <div class="pane"> <h3>Horse</h3> <p>The horse is one of two extant subspecies of Equus ferus 阅读全文
posted @ 2020-07-11 19:52 LangZ- 阅读(156) 评论(0) 推荐(0) 编辑
2020年7月7日
几何属性
摘要： 阅读全文
posted @ 2020-07-07 15:46 LangZ- 阅读(179) 评论(0) 推荐(0) 编辑