04 2022 档案
摘要：rem是CSS3新增的相对单位长度，是指相对于根元素html的font-size计算值的大小。 默认根元素的font-size都是16px的，如果想要设置12px的字体大小 也就是12px/16px=0.75rem。 由于px是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放； rem直接相
阅读全文
摘要：opacity:0 不占空间，不能点击，会引起回流，子元素不影响； visibility:hidden 占据空间，不能点击，引起重绘，子元素可设置visible进行显示； display:none 占据空间，可以点击，引起重绘，子元素不影响。
阅读全文
摘要：首先要知道浏览器渲染机制，具体可看之前的文章：https://www.cnblogs.com/chloe56/p/16161259.html 浏览器采用流式布局模型（Flow Based Layout）； 浏览器会把HTML解析成DOM,把CSS解析成CSSOM合并产生渲染树（Render Tree
阅读全文
摘要：方法一：margin margin:上下边距 左右边距； 要让div水平居中，就要设置左右边距为auto,自适应； 要让div垂直居中，就要计算上下边距了，垂直居中的上下边距为父容器高度的一半减去子容器高度的一半。 代码如下： <!DOCTYPE html> <html lang="en"> <he
阅读全文
摘要：定义： BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种CSS渲染方式，相当于一个独立的容器，里面的元素和外部元素相互不影响。 官方文档解释如下：A block formatting context contains everything inside of
阅读全文
摘要：模板字面量最常用的一个特性是支持字符串插值，也就是可以在一个连续定义中插入一个或多个值。 技术上讲，模板字面量不是字符串，而是一种特殊的JavaScript句法表达式，只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从它们最接近的作用域中取值。 字符串插值
阅读全文
摘要：实验名称 设计原则。 实验目的 设计并实现符合面向对象设计原则的某一演示系统。 实验类型 设计型。 实验环境 编程环境：Visual Studio Code； 运行环境：Windows 10等。 实验内容 该演示系统分为车、路、人三个抽象类，符合依赖倒置原则；车抽象类分出汽车、公交车两个子类，路分为
阅读全文
摘要：模板字面量是ES6新增的定义字符串的方式。 与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串： let myMultiLineString = 'first line\nsecond line'; let myMultiLineTemplateLiteral = `first l
阅读全文
摘要：什么是webp webp是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大优点是在相同质量的文件下，它拥有更小的文件体积，因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式
阅读全文
摘要：页面内容方面： 通过文件合并、css雪碧图、使用base64等方式减少http请求数，避免过多的请求造成等待的情况； 通过dns缓存等机制来减少dns的查询次数； 通过设置缓存策略，对常用不变的资源进行缓存； 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再
阅读全文
摘要：实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页内没有办法直接通信，因此我们可以找一个中介者让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。 使用Websocket，通信页的标签连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端； 可以调用loc
阅读全文
摘要：首先解析收到的文档，根据文档定义构建一棵DOM树，DOM树是由DOM元素及属性节点组成的； 然后对css进行解析，生成CSSOM规则树； 根据DOM树和CSSOM规则树构建Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小属性的矩形，渲染对象和DOM对象相对应，但这种
阅读全文
摘要：从属关系区别：@import只能导入样式表css，link除了引入css还可以定义rss、rel连接属性、引入网站图标等； 加载顺序区别：加载页面时，link标签引入的css被同时加载，@import引入的css将在页面加载完毕后被加载； 兼容性区别：link无兼容问题，@import兼容IE5以上
阅读全文
摘要：figure 用于定义一个可附加标题的内容元素，figcaption 用于为figure元素添加标题和描述信息。 figure表示一个独立的模块，figure中最多有一个figcaption，figcaption表示标题，必须在figure内部任意位置都可以，他们一般用于图，代码，视频，音频等。 以
阅读全文
摘要：问题： 我先安装了decorators： 然后运行项目就报错emmmmm： src\pages\home\cookbook\swiper.jsx Line 21: Parsing error: This experimental syntax requires enabling one of the
阅读全文
摘要：本文测试svg一些标签用法及属性 <body> <!-- 一个宽度为500，高度为500的svg画板， viewBox相对单位：将500px映射到100当中，且左上角坐标0,0 --> <svg width="500px" height="500px" viewBox="0 0 100 100" s
阅读全文
摘要：昨天某公司笔试题碰到这样一个问题 分析以下代码： <svg> <defs> <path id="path1" d="M75,20,a1,1 0 0,0 100,0"></path> </defs> <a xlink:href="http://www.baidu.com" target="_blank
阅读全文
