05 2022 档案
摘要：概念 响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。 原理 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。 兼容 页面头部必须有meta声明的viewport。
阅读全文
摘要：绝对定位+transform 父亲给一个高度，position：relative；子盒子position：absolute，top：50%；left：50%；transform：translate（-50%，-50%） 绝对定位+margin:auto 父容器给一个高度，position：relat
阅读全文
摘要：首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。 然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值
阅读全文
摘要：属性 static 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。 relative 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、r
阅读全文
摘要：margin重叠问题 个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文 档流的元素的外边距不会折叠。重叠只会出现在垂直方向。只有块级元素会触发外边距塌陷的问题 计算原则 如果两者都是正数
阅读全文
摘要：BFC理解 Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。 Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。 块
阅读全文
摘要：浮动：float 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 语法 左浮动：float：left; 右浮动：float:right; 浮动特性 浮动的元素会脱离标准流（脱标）【不再保留原来的位置】 浮动元素一行内显示（不会有缝隙，若一行装不下，另起一行），并且顶部对齐 浮动盒
阅读全文
摘要：加载性能 css压缩：将写好的css进行打包压缩，可以减小文件体积。 css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。 减少使用@import，建
阅读全文
摘要：line-height的概念： line-height 指一行文本的高度，包含了字间距，上间距、下间距，实际上文本行基线间的垂直距离； 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定； 一个容器没有设置高度，那么撑开容器高度的是 line-height
阅读全文
摘要：新增选择器 属性选择器 结构伪类选择器 伪元素选择器 2D转换：transform 位移：transform：translate（100px，100px） 缩放：transform：scale（1，1） 旋转：transform：rotate（45deg） 3D转换：transform 位移：tra
阅读全文
摘要：在写页面的时候，会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，下面举例说明： <html> <head> <title>demo</title> <style type="te
阅读全文
摘要：盒模型分为两种，一种是IE盒模型，一种是W3C盒模型。 IE盒模型用于IE6一下版本的浏览器，它的content的宽度是包括了padding和border的 W3C盒模型：content的宽度不包括padding和border 此外两种盒模型都包括margin（外边距），在元素外创建额外的空白，空白
阅读全文
摘要：两者都是外部引用CSS的方式，它们的区别如下： link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 link是XHTML标签，无兼容问题；@i
阅读全文
摘要：这两个属性都是让元素隐藏，不可见。两者区别如下： 在渲染树中 display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间； visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。 是否是继承属性 display:none是非继承属性
阅读全文
摘要：display：none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置 visibility：hidden 元素在页面中仍占据空间 opacity: 0 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间 position: absolute 通过使用绝对定位将元素
阅读全文
摘要：none：元素不显示，并且会从文档流中移除。 block：元素显示/块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block：行内块元素类型。默认宽度为内容宽度，可以设置宽高，同行显示（有间隙）。 lis
阅读全文
摘要：不可继承属性 display：元素的显示模式（块级、行内元素、行内块） 文本属性 vertical-align：垂直对齐方式 text-decoration：规定添加到文本的装饰（underline-line、line-through、overline） text-shadow：文本阴影效果 whi
阅读全文
摘要：选择器 基础选择器 通配符选择器 标签选择器/元素选择器 类选择器 id选择器 复合选择器 后代选择器 子代选择器 并集选择器 伪类选择器 新增选择器 属性选择器 结构伪类选择器 伪元素选择器 优先级 0：通配符选择器（继承） 1：标签选择器、伪元素选择器 10：类选择器、属性选择器、结构伪类选择器
阅读全文
摘要：渐进增强： 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。 优雅降级： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。 两者区别： ● 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进
阅读全文
摘要：产生乱码的原因： ● 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码； ● html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码； ● 浏览器不能自动检测网页编码，造成网页乱码。 解决方式： ●
阅读全文
摘要：DOCTYPE(⽂档类型) 的作用 DOCTYPE是文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的模式来渲染文档。它必须声明在HTML⽂档的第⼀⾏。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Co
阅读全文
摘要：作用：<head> 标签用于定义文档的头部，它是所有头部元素的容器。 <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读
阅读全文
摘要：SVG SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加 Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG
阅读全文
摘要：iframe 作用：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 优点： ● 用来加载速度较慢的内容（如广告） ● 可以使脚本并行下载 ● 可以实现跨子域通信 缺点： ● iframe 会阻塞主页面的 onload 事件 ● 无法被一些搜索引擎索识别 ● 会产生很多页面，不容易
阅读全文
摘要：离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当
阅读全文
摘要：JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多 核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。 Web Worker 的作用，就是为 JavaSc
阅读全文
摘要：元素类型 块级元素 自己独占一行 可以设置宽度、高度、内外边距，默认高度与父亲一致 容器内可以放行内块元素或者块级元素（文字类的元素内不能放块级元素） 行内元素 相邻的行内元素一行显示多个 不能设置宽度和高度，默认的宽度和高度就是它自身的高度和宽度 行内元素内部只能放文本或者行内元素（a可以放块级元
阅读全文
摘要：响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。 <img src="image-128.png" srcset="image-256.png 2x" /> 使用上面的代码，就能实现在
阅读全文
摘要：语义化标签 header、nav、article、section、aside、footer 媒体标签 audio <audio src='' controls autoplay loop='true'></audio> video <video src='' poster='imgs/aa.jpg'
阅读全文
摘要：meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等 常用的meta标签： （1）charset，用来描述HTML文档的编码类型：<meta charset="UTF-8" > （2） keywords，页面关键词： <meta nam
阅读全文
摘要：如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。 使用defer和async都会使得解析HTML的同时进行js脚本的异步下载，不会阻碍文档的解析， 区别是， async在下载完js脚本之后立即执
阅读全文
摘要：概念 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 使用语义化的优点 代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。 有利于搜索引擎优化（SEO）。 常见的
阅读全文
摘要：src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。 （1）src src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置； 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和frame 等元素。
阅读全文
摘要：概念 是一个基于Chrome V8引擎的JavaScript运行环境，让JavaScript 运行在服务端的开发平台。Node. js是一个事件驱动、非阻塞式I/O的模型，轻量而又高效。浏览器是js的前端运行环境 node.js是js的后端运行环境。 优缺点 优点 处理高并发场景性能更佳 适合I/O
阅读全文
摘要：如何对项目中的图片进行优化？ 不用图片：很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。 小图使用 base64 格式 将
阅读全文
摘要：回流与重绘的概念及触发条件 回流/重排 概念 当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。 触发条件 ● 页面的首次渲染 ● 浏览器的窗口大小发生变化 ● 元素的内容发生变化 ● 元素的尺寸或者位置发生变化 ● 元素的字体大小发生变化
阅读全文
摘要：懒加载的概念 懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问 题。在滚动屏幕之前，可视化
阅读全文
摘要：CDN的概念 CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其 他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。 CDN的作用 CDN一般
阅读全文
摘要：对节流与防抖的理解 使用防抖和节流的目的： 为了避免频繁触发回调，导致大量的计算和异步请求，而造成的性能或者卡顿问题 防抖 概念 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。 这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
阅读全文
摘要：git 介绍： https://zhuanlan.zhihu.com/p/30044692 使用中遇到的问题 1. windows中用type查看文件内容，linux中用cat查看文件内容 使用方法：type filename cat filename 2. git add .git commit
阅读全文
摘要：展现分页器需要的数据： （1）当前是第几页：pageNo （2）每页有多少条数据：pageSize （3）总共有多少条数据：total （4）连续页码的个数（奇数）：continues 在Pagination的computed中可以计算总页数，并且计算连续页码的开始值和结束值 <script> ex
阅读全文
摘要：Set Set：集合【去重】（类似数组）,是一个对象类型 1.概念 它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』(…)和『for…of…』进行遍历 2.集合的属性和方法 size：返回集合的元素个数 add增加一个新元素，返回当前集合（一次只能加
阅读全文
摘要：spread扩展运算符 1.概念 扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。 2.应用 （1）数组的合并 const arr1 = [1, 2, 3] const arr2 = ['a', 'b', 'c']
阅读全文
摘要：ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments 。 与arguments不同的是，arguments返回的是一个对象，而rest函数返回的是一个数组，便于我们使用forEach（）、filter（）、map（）、some（）、every（）去操作数组。 注意：rest
阅读全文
摘要：简化对象写法 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 1.对象中函数简写 2.对象中直接引用属性和方法
阅读全文
摘要：箭头函数定义及调用 箭头函数特点 （1）如果形参只有一个，则小括号可以省略 ，函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果，若有return，return必须省略 （2）箭头函数的this是静态的，箭头函数 this 指向声明时所在作用域下 this 的值，且无法改变。
阅读全文
摘要：模板字符串`` 字符串中可以出现换行符 可以使用 ${xxx} 形式输出变量 优点 在模板字符串中，空格、缩进、换行都会被保留，可以识别html代码 模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算 1. 模板字符串 需要拼接字符串的时候尽量改成使用模板字符串: // 例子 2-1
阅读全文
摘要：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称 为解构赋值。 解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数值。 数组的解构：以元素的位置为匹配条件，来提取想要的数据 对象的解构：以属性名为匹配条件，来提取想要的数据
阅读全文
摘要：ES6新增了变量的声明方式、解构赋值、模板字符串、简化对象写法、箭头函数、函数形参默认值、rest参数、拓展运算符、新增数据类型（Set、Map、Symbol、BigInt）、promise、async/await let、const、var的区别 区别主要体现在七个方面 （1）是否有块级作用域 块
阅读全文
摘要：1.props：父给子传递数据 （1）父组件中在子组件自身传递数据 home父组件 （2）子组件在props接收父组件传递过来的数据 Floor子组件 props中的数据直接挂载到组件实例中，直接用this...可以访问的到 2.自定义事件：子给父传递数据 （1）子组件中触发自定义事件 在子组件中有
阅读全文
摘要：利用swiper制作轮播图 （1）安装swiper插件，npm i --save swiper@5 （2）引包（在需要轮播图的组件中的script中引入，该项目中是Carousel） 在入口文件引入swiper样式 （3）在页面结构，即轮播图完整的前提下，new Swiper ***如何判断轮播图结
阅读全文
摘要：操作步骤： （1）在项目src文件夹中创建mock文件夹 （2）在mock文件夹中创建相应的JSON文件，准备JSON数据（注意别有空格） （3）把mock数据需要的图片放置在public文件夹中（public文件夹在打包时，会把相应的资源原封不动的打包到dist文件夹中） （4）创建mockSer
阅读全文
摘要：三级联动,用户可以点击的:一级分类、二级分类、三级分类,当你点击的时候 以商城项目为例，Home模块跳转到Search模块,以及会把用户选中的产品(产品名字、产品ID)在路由跳转的时候,进行传递 路由跳转: 声明式导航:router-link 编程式导航:push|replace 方法一:声明式导航
阅读全文
摘要：1.vuex概念 专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件。 对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信 2.vuex工作原理图 整个虚线部分就是Vuex，我们可以把它看成一个公共仓库store。store
阅读全文
摘要：浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。 两个不同的源之间若想要相互访问资源或者操作DOM，那么会有⼀套基础的安全策略的制约，我们把这称为 同源策略。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。 其中，如果两个URL的协议、主机和端口号都相同，称之为同源
阅读全文
摘要：//对于axios进行二次封装，想用它的请求和响应拦截器 import axios from "axios"; //引入进度条 import nprogress from 'nprogress' //引入进度条样式， import "nprogress/nprogress.css" // 在当前模块
阅读全文
摘要：在写Vue项目的时候，进行路由跳转，对于编程式导航会出现多次执行的时候抛出NavigationDuplication错误 解决方法：在配置路由组件的文件（router/index.js）中进行重写
阅读全文
摘要：有三种写法 在router中: // 布尔值写法 // props:true, // 对象写法,额外地给路由组件传递一些props // props:{a:1,b:2} // 函数写法:params参数 query参数都可以传递 props:($route)=>{ return{keyword:$r
阅读全文
摘要：路由传参：传递query参数和params参数 query参数 不属于路径中的一部分，类似于ajax中的queryString /home?k=v&k=v，路径与参数之间用？隔开,路由信息配置path时不需要占位 声明式导航传递query参数 to的对象写法中的path可以换成name 编程式导航传
阅读全文
摘要：路由的跳转有两种形式：声明式导航和编程式导航 声明式导航： <router-link to='/home'>去home页面</router-link> 适用于直接跳转，不需要添加额外的业务逻辑 router-link（可以理解为a标签，可以加class修饰）【就是把a替换成router-link】
阅读全文
摘要：1.对this对象的理解 this是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。 下面使用几个例子来说明“最后一次调用” 例1 var name = 'windowsName' function a() { var name = 'Jack'; console.log(this); c
阅读全文
摘要：在需要控制DOM元素在页面中的显示和隐藏时，可以通过v-if和v-show来实现，两种方法在实现原理、编译过程和性能消耗方面都有各自的特点，因此分别适用于不同的使用场景。 实现原理： v-if是动态的向DOM树内添加或者删除DOM元素； v-show是通过设置DOM元素的display样式属性控制显
阅读全文
