top: 50%;
height: 100px;
margin-top: -50px;
}
未知高度
.parent {
position: relative;
}.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
垂直水平居中根据上方结合
flex 方式
.parent {
display: flex;
justify-content: center;
align-items: center;
}
grid 方式
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
3，css 优先级确定
- 每个选择器都有权值，权值越大越优先
- 继承的样式优先级低于自身指定样式
- ！important 优先级最高 js 也无法修改
- 权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式
表（当前文件中）> 外部样式表（外部文件中）
4，如何清除浮动
不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，
子元素写了浮动后，父元素会发生高度塌陷）
- clear 清除浮动（添加空 div 法）在浮动元素下方添加空 div,并给该元素写 css 样式：
{clear:both;height:0;overflow:hidden;} - 给浮动元素父级设置高度
- 父级同时浮动（需要给父级同级元素添加浮动）? 父级设置成 inline-block，其 margin: 0 auto 居中方式失效
- 给父级添加 overflow:hidden 清除浮动方法
- 万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）
.float_div:after{
content:“.”;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
5，link @import 导入 css
（1）link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于
CSS 范畴，只能加载 CSS。
（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
（3）link 无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
（4）link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。
6， [“1”, “2”, “3”].map(parseInt)
首先, map 接受两个参数, 一个回调函数 callback, 一个回调函数的 this 值，其中回调函数接受三个参数 currentValue, index, arrary；而题目中, map 只传入了回调函数–parseInt.。其次, parseInt 只接受两个两个参数 string, radix(基数).
本题理解来说也就是 key 与 index
所以本题即问 parseInt(‘1’, 0);parseInt(‘2’, 1);parseInt(‘3’, 2)；
parseInt(string, radix)
string 必需，要被解析的字符串。
radix 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开
头，将以 16 为基数。
7，浅拷贝和深拷贝
- 浅拷贝
// 第一层为深拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 …
- 深拷贝
JSON.parse(JSON.stringify())
递归函数
function cloneObject(obj) {
var newObj = {} //如果不是引用类型，直接返回
if (typeof obj !== ‘object’) {
return obj
}
//如果是引用类型，遍历属性
else {
for (var attr in obj) {
//如果某个属性还是引用类型，递归调用
newObj[attr] = cloneObject(obj[attr])
}
}
return newObj
}
8，数组去重的方法
1）ES6 的 Set
let arr = [1,1,2,3,4,5,5,6]
let arr2 = […new Set(arr)]
2）reduce()
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
if(!ar.includes(cur)) {
ar.push(cur)
}
return ar
},[])
3）filter()
// 这种方法会有一个问题：[1,‘1’]会被当做相同元素，最终输入[1]
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
return arr.indexOf(item) === index
})
9，cookie、localStorage、sessionStorage的区别和使用？
cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否
已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
创建和访问localStorage：
1）、设置数据：
var forgetData = {
phone:vm.phone
};
localStorage.setItem(“forgetData”,JSON.Stringfy(forgetData));
//forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化
为字符串格式；
获取数据：
vm.forgetData=JSON.parse(localStorage.getItem(“forgetData”)); //将字符串
转化为JSON化；
2）、设置：localStorage.name = “zhao”;
获取：localStorage.name //zhao
localStorage.setItem(key,value);//设置数据
localStorage.getItem(key);//获取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//清除所有localStorage的数据
sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；
共同点：都是保存在浏览器端，且同源的。
区别：
cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回
传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数
据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小
限制，但是要比cookie大得多，可以达到5M或者更大。
数据有效期不同，
sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；
localStorage：始终有效，浏览器窗口关闭也一直保存；
cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
作用域不同，
sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；
localStorage在所有的同源窗口中都是共享的；
cookie也是在同源窗口中共享的
10、ajax请求时get和post的区别？
get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；
post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送
11、常见状态码
2开头 （请求成功）表示成功处理了请求的状态代码
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向
300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
12，移动端触摸事件
①touchstart：当手指触碰到屏幕的时候触发
②touchmove：当手指在屏幕上滑动的时候触发
③touchend：当手指离开屏幕的时候时候触发
④touchcancel 事件：当系统停止跟踪触摸的时候触发(这个事件很少会用，一般不做深入研究)。电话接入或者弹出信息等其他事件切入 event：
（1）touches：表示当前跟踪的触摸操作的 touch 对象的数组。
（2） targetTouches：特定于事件目标的 Touch 对象的数组。
（3） changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。 每个 touch 对象包含的属性
（4） clientX：触摸目标在视口中的 x 坐标。
（5） clientY：触摸目标在视口中的 y 坐标。
（6）identifier：标识触摸的唯一 ID。
（7） pageX：触摸目标在页面中的 x 坐标。
（8） pageY：触摸目标在页面中的 y 坐标。
（9）screenX：触摸目标在屏幕中的 x 坐标。
（10） screenY：触摸目标在屏幕中的 y 坐标。
（11） target：触目的 DOM 节点目标。
13，生命周期
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
- 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
- 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
- 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
- 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
（1）什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载
Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）vue生命周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
（3）vue生命周期总共有几个阶段
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
（4）第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
（5）DOM 渲染在 哪个周期中就已经完成
DOM 渲染在 mounted 中就已经完成了
（6）简单描述每个周期具体适合哪些场景
生命周期钩子的一些使用方法：
- beforecreate : 可以在这加个loading事件，在加载实例时触发
- created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
- mounted : 挂载元素，获取到DOM节点
- updated : 如果对数据统一处理，在这里写上相应函数
- beforeDestroy : 可以做一个确认停止事件的确认框
- nextTick : 更新数据后立即操作dom
14，Vue 的 nextTick 的原理是什么？
1）为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
2）理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
3）理解 nextTick
而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
15，Vue中引入组件的步骤?
1）采用ES6的import … from …语法或CommonJS的require()方法引入组件
2）对组件进行注册,代码如下
// 注册
Vue.component(‘my-component’, {
template: ‘
})
3）使用组件 <my-component></my-component>
16，说出至少4种vue当中的指令和它的用法？
- v-if：判断是否隐藏；
- v-for：数据循环；
- v-bind:class：绑定一个属性；
- v-model：实现双向绑定
17，vuex
（1）vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
（2）vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module
- vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对
象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改
变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中 - vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters - vuex的Mutation特性
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action
可以包含任意异步操作。
（3）不用Vuex会带来什么问题？
- 可维护性会下降，想修改数据要维护三个地方；
- 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
- 增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背
18，vuex 是基于redux
1）全局的store
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
