01 2023 档案
摘要：vue3中使用ref来创建响应式数据，让习惯了选项式API的我很不习惯。因为得使用xxx.value来读写响应式数据，没有vue2中直接使用this.xxx来读写简洁。 vue3这样设计的原因是原生JavaScript无法拦截对局部变量的读写，只能拦截对对象属性的读写。 // 局部变量a的读写，没法
阅读全文
摘要：encodeURI和encodeURIComponent的作用对象都是URL，唯一的区别就是编码的字符范围： encodeURI不会对ascii字母、数字、~!@#$&*()=:/,;?+' 进行编码。 encodeURIComponent不会对ascii字母、数字、~!*()'进行编码。 所以en
阅读全文
摘要：概述 突然想到，vue-lazyload不就是图片进入视口时才加载的吗，既然我要用vue-lazyload，那为什么不干脆研究一下vue-lazyload是如何判断元素进入视口的呢。 原理 通过参考资料1可知，vue-lazyload用于判断元素是否进入视口的代码如下： checkInView ()
阅读全文
摘要：页面之间具有依赖关系 A页面通过window.open或iframe打开B页面后，A页面和B页面之间就有了依赖关系。有了依赖关系之后。发送方使用window.postMessage()向发送消息，接收方监听message事件接收消息。 <body> Page A <button onclick="o
阅读全文
摘要：前言 影响网页性能最主要的因素应该属图片资源了，现在一张图片动不动几兆，如果一张页面有很多图片（像电商类网站），等页面上的图片全部加载完毕再显示在浏览器上的话，用户可能早就不耐烦地关掉网页了。解决该问题的办法就是图片懒加载了，即只有用到的时候再加载图片，避免无意义的开销。 懒加载是一个理念，具体的应
阅读全文
摘要：概述 1）什么是BFC BFC，全称Block Formatting Content，译为“块级格式化上下文”。它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局。这个区域与外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局不
阅读全文
摘要：不同情况的margin合并 两个竖直方向上相邻的margin会发生合并。合并的margin的高度等于两者中的较大者。 兄弟关系 父子关系 当父元素没有设置内边距或边框，以及没有触发BFC时，如果子元素的margin值大于父元素的margin值，就会发生margin塌陷。解决方法是给父元素添加边框或内
阅读全文
摘要：rem 先将1rem设为屏幕宽度的1/20： document.addEventListener('DOMContentLoaded', function () { document.documentElement.style.fontSize = document.documentElement.
阅读全文
摘要：[1] display:table-cell知识点总结 匿名表格元素 有时候我们在编写table元素的时候，会少些一些元素。这些“丢失”的元素会被模拟出来，使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table元素，从而使得其符合table/inline-table、ta
阅读全文
摘要：float元素的特性 包裹性 包裹性由“包裹”和“自适应”两部分组成。 1）包裹 “包裹”是指浮动元素若没有指定宽度和高度，则设置适应内容的宽度和高度。即使是块级元素，width也不再占满屏幕的一行。 （图中红色为father，蓝色为浮动元素son，绿色为content） 2）自适应 “自适应”是指
阅读全文
摘要：word-wrap：是否对超出容器的长单词进行换行。 normal：只在允许的断字点换行。 break-word：在长单词或URL地址内部进行换行。 word-break：定义如何换行。 normal：使用浏览器默认的换行规则。 break-all：允许在单词内换行。 keep-all：只能在半角空
阅读全文
