初级前端面试题

项目业务

1、无感刷新

答：权限控制(无感刷新)本质上都是对token的处理，方案有很多，我举例比较常见的一种。
权限可以简单的分为3种情况，
​
1. 未登录 
2. 已登录token过期 
3. 已登录token和refreshToken都过期
​
针对上面三种情况，解决方案如下
​
1. 未登录的话，可以通过封装一个全局的权限组件统一处理，发现没有token，跳转登录页
2. 已登录token过期，一般后台都会再准备一个refreshToken，实现无感刷新
在响应拦截器中判断状态码 401，携带refreshToken到后台获取最新的token或refreshToken，再发送之前请求即可
3. 已登录token和refreshToken都过期，跳转登录页
还是在响应拦截器中判断状态码 401，也判断当前请求是否为 refreshToken，那么跳转登录页

2、浏览器怎么渲染的，过程

3、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
   
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
​
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
   
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
   
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

4、要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路

流式布局：
   使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动 web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
​
响应式开发
   那么 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。越来越多的设计师也采用了这种设计。
   CSS3 中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。
   
超小屏幕（移动设备） 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
​
   由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式

5、前端如何实现搜索关键字高亮显示

实时搜索: 通过input事件和定时器防抖来实现
1。每次输入框发生输入变化都会触发绑定input事件函数,来做监听处理
2，为了防止每次输入的值都会去触发事件函数,通过clearTimer方法清除上一个定时器,如果两次输入的时间间隔小于2s中,那么第一个定时器将被清除，同时执行第二个定时器
高亮显示:
通过RegExp来将关键词替换成htm1标签，同时用vue中的v-htm]进行绑定,实现高亮

6、前端使用枚举的场景，使用枚举有什么好处？

在具体的应用场景中，常见的应用包括：

1. 定义常量：在一些常量取值固定的情况下，使用枚举可以更加清晰地表示这些常量，例如HTTP状态码、错误码等。
2. 表示状态：在应用程序中经常需要表示一些固定的状态，例如订单状态、用户状态等。使用枚举可以更清晰地表示这些状态，提高代码的可读性和可维护性。
3. 映射关系：在一些多对一的关系中，使用枚举可以更加清晰地表示不同值之间的映射关系，例如在前端开发中使用枚举来表示一些标识符的映射关系。

好处：枚举可以提高代码的可读性、可维护性和健壮性

7、前端如何实现excel文件上传

当时公司的场景大概一个excel文件里就几十条数据，量比较少，和后端商量之后制定了前端主导的方案，解析的过程放到了浏览器端做，当时是参考了一下vue-admin中的现成的方案

准备好一个标准的excel文件，然后通过插件解析成js数据，把js数据格式化一下，最后个通过调用后端接口完成导入

数据量小的情况可以由前端完成解析,当数据量大时,需要由后端完成

8、请描述中后台权限管理实现思路

1、步骤
1）、默认路由配置里只有登录的配置。
2）、登录成功后，后端返回功能权限，最好直接就是路由配置，如果不是，前端把功能权限处理成路由配置的json数组格式。
使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。同时，把该路由配置保存到sessionStorage里（防止前端刷新后丢失路由配置）。
3）、前端在“App.vue”里的created里，需要读取cookie里或sessionStorage里保存的路由配置，同样需要把读取到的路由配置，使用vue-router对象的addRoutes方法
  把该路由配置动态添加到路由对象里。这样刷新页面时，就可以在此处获取到当前用户的路由权限。
2、特别注意：
一定要把获取到的权限数组存放到sessionStorage。否则，刷新页面时，路由配置就会丢失掉。

9、如何实现大文件上传？

前端实现大文件上传主要有以下几种方法：

1. 分片上传：将文件分成多个小块，分别上传，上传完成后再合并。这种方法可以避免单次上传过大的问题，同时也可以在上传失败时只重新上传失败的部分。
2. 断点续传：在上传过程中，如果中断了上传，可以记录已经上传的位置，然后下次上传时从上次中断的位置继续上传，这样可以避免重新上传整个文件。
3. WebSocket上传：使用WebSocket协议进行文件上传，可以在上传过程中实时反馈上传进度，并且可以实现断点续传和续传失败的部分。
4. 使用第三方上传组件：如Plupload、WebUploader等，这些组件可以自动处理文件分片、上传进度等问题，使用起来非常方便。

总之，实现大文件上传需要考虑上传过程中可能遇到的各种问题，如上传失败、上传速度慢、断网等问题，需要通过一些技术手段进行解决，以提高上传的可靠性和效率。构建 vue-cli 工程都用到了哪些技术？他们的作用分别是什么？

10、如何实现下拉刷新？

下拉刷新是一种常见的页面交互方式，它可以在用户下拉页面时自动刷新内容，提高用户体验。实现下拉刷新主要有以下几种方式：

1. 使用原生的下拉刷新：在移动端浏览器中，可以使用原生的下拉刷新功能，通过监听浏览器的scroll事件和touch事件，当用户下拉页面时，触发刷新操作。这种方式简单易用，但不能在APP中使用。
2. 使用第三方组件库：如Mint UI、Vant等，这些组件库提供了下拉刷新的组件，可以在Vue、React等框架中使用，使用起来方便快捷。
3. 自定义实现：通过监听touchstart、touchmove、touchend等事件，实现下拉刷新的效果，主要步骤包括：

（1）在touchstart事件中记录下拉开始的Y轴坐标；

（2）在touchmove事件中计算下拉的距离，然后根据下拉距离实时更新页面的样式；

（3）在touchend事件中判断下拉的距离是否超过阈值，如果超过，则触发刷新操作，否则恢复到原始状态。

总之，实现下拉刷新的方式有很多种，开发者可以根据具体需求和技术水平选择合适的方式。

11、上传一个文件需要配置那些参数

上传文件需要配置以下参数：

url：上传文件的接口地址。

filePath：要上传的文件路径。

name：上传文件对应的 key，服务器端通过这个 key 可以获取到文件的二进制内容。

formData：上传文件时要附带的额外信息，可以是一个对象或数组。

success：上传成功后的回调函数。

fail：上传失败后的回调函数。

complete：上传完成后的回调函数，不论成功或失败都会执行。

12、webSocket 协议是什么，能简述一下吗

1. 什么是websocket？ 
  a. 本质： 一种双向通信协议，
  b. 作用：常用来做即时通讯。
  c. 场景：聊天会话、股票交易等。


客服聊天机器人
  本质上是使用了 websocket 的客户端和服务端的双向通信实现，页面通过 new WebSocket()链接链接，监听onmessage获取服务端传送过来的数据，实现在线聊天
但是因为需要 机器人客服/智能回复/断线重连 等功能，一般都是使用市场上面比较成熟的 客服系统 即可

13、token失效处理

Token失效是指在使用Token进行身份验证时，系统验证该Token无效或过期。如果Token失效，需要进行以下处理：

1. 重新获取Token：可以通过重新登录或者刷新Token的方式，重新获取有效的Token。

2. 更新Token：如果Token只是过期了，但仍然有效，可以尝试更新Token，使其保持有效状态。

3. 提示用户重新登录：如果Token失效且不能通过更新或重新获取来解决，应该提示用户重新登录，以获取新的有效Token。

4. 清除Token：如果Token被盗用或存在其他安全问题，应该立即清除该Token并要求用户重新登录，以确保账户的安全。

5. 日志记录和报告：在处理Token失效时，应该记录日志并报告相关信息，以便分析和改善系统的安全性和可靠性。

总之，在处理Token失效时，需要及时、准确地识别问题，并采取相应措施，以确保系统和用户的安全。

具体项目

项目相关

1、修复bug的流程

一般是测试发布到禅道，后面由组长由组长分配给组内成员

2、前端和后端如何进行数据交互

前后端一起开发，前端画页面，用mock模拟数据，后端写接口。 前后端打交道最多就是接口，所以得使用postman。

3、真正企业中的项目是如何配置三种环境进行实际开发的（前后端数据交互架构方面的问题）

开发  地址  自测  提交到测试环境
测试  地址  测试
线上  地址  运维

4、产品结束后进行测试，大约需要多久才能上线？

#看项目大小，会在需求评审和技术评审进行排期

#需要前后端和测试一起根据实际情况商量，测试结束后还要进行验收

5、接口不能正常工作，如何判断问题是在前端还是后端？

a.首先根据接口文档看传参，一般传参没问题会和后端沟通
b.更多的是直接看后端返回的数据，自己做的功能，如果数据有问题是能够看出来的

6、项目中的难点？

1、有一次上传文件的时候，

7、前端重新部署如何通知用户刷新网页？

#如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯，前端部署完之后,后端给个通知，前端检测到Message进行提示，还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往前端推送消息，前端无法给后端发送，我们也不需要给后端发送。


#纯前端实现
  安装http-server  开个服务
  重新打个包npm run build
  

HTML

1、Doctype 作用? 严格模式与混杂模式如何区分?它们有何意义?

作用：DOCTYPE声明于文档最前面，告诉浏览器以何种方式来渲染页面。

如何区分：
        严格模式的排版和Js运作模式，以该浏览器支持的最高标准运行。
        混杂模式：页面以宽松的向后兼容方式（IE5.5以下的渲染模式）显示，防止站点无法工作

意义：混杂模式服务于旧世规则，严格模式服务于标准规则；

5.解构赋值

H5新特性

1. 语义化标签

（1）比如：header、content、footer、aside、nav、section、article等语义化标签。 （2）语义化标签的好处：结构清楚，易于阅读，可维护性更高，有利于SEO的优化。

2. 媒体标签（aodio、video）

展开> video/audio标签的属性src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标签是否需要显示控制条 poster: 用于告诉video标签视频没有播放之前显示的占位图片 loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放 preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效 muted:静音（audio的）

3. 表单新特性

表单类型： email ：能够验证当前输入的邮箱地址是否合法 url ： 验证URL number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设 置为最大值，min可以设置为最小值，value为默认值。 search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。 range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以 设置为默认值 color ： 提供了一个颜色拾取器 time ： 时分秒 date ： 日期选择年月日 datatime ： 时间和日期(目前只有Safari支持) datatime-local ：日期时间控件 week ：周控件 month：月控件 表单属性： placeholder ：提示信息 autofocus ：自动获取焦点 autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提： 表单必须提交过 必须有name属性。 required：要求输入框不能为空，必须有值才能够提交。 pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$" multiple：可以选择多个文件或者多个邮箱 form=" form表单的ID" 表单事件： oninput 每当input里的输入框内容发生变化都会触发此事件。 oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度， value表示已完成多少 meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持） high/low：规定被视作高/低的范围 max/min：规定最大/小值 value：规定当前度量值

5.DOM查询

document.querySelector() document.querySelectorAll() 它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6.Web存储

HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储。除非主动删除数据，否则数据是永远不过期。 sessionStorage - 不是一种持久化的本地存储，仅仅是会话级别的存储。 7.其他 ①拖放：拖放是一种常见的属性，即抓取对象以后拖到另一个位置。 图片拖动案例参考: 原生JS快速实现拖放（drag and drop）效果 ②画布（canvas）：canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 ③SVG：SVG指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准。 ④地理位置：Geolocation（地理位置）用于定位用户的位置。 ⑤webWorker 在当前JavaScript主进程中开启一个异步线程（独立工作，在主线程以外运行） 当开发人员发现 JS 引擎线程超负荷运作的时候，可以通过Web Worker提供的API开辟一个新的线程，用于独立的运行脚本程序（但是该脚本程序不能操作DOM，主要用于计算），避免 JS 引擎线程阻塞 GUI 线程渲染视图。window.postMessage可用于解决跨域数据传输。

⑥ webSocket

websocket### 定义 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。(*它是一个协议) WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。WebSocket是类似Socket的TCP长连接通讯模式。一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。

流程

websocket实现前台提交通知,后台接收,后端会定义一个websocket接口,我们可以创建一个实例与后端接口链接起来,由后端定义数据库录入了什么信息后主动向前端传递数据,我们通过实例.onmessage接收后端传递的数据并操作渲染页面等

var ws = new WebSocket("ws://localhost:8080"); 
//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
ws.onopen = function(){
　　//当WebSocket创建成功时，触发onopen事件
   console.log("open");
　　ws.send("hello"); //将消息发送到服务端
}
ws.onmessage = function(e){
　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
　　console.log(e.data);
}
ws.onclose = function(e){
　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
　　console.log("close");
}
ws.onerror = function(e){
　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
　　console.log(error);
}

链接(http长轮询可了解):后端通知实现方式_后端通知前端_得求的博客-CSDN博客 一，什么是websocket WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个持久化的协议 二，websocket的原理 websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信 在websocket出现之前，web交互一般是基于http协议的短连接或者长连接 websocket是一种全新的协议，不属于http无状态协议，协议名为"ws" 三，websocket与http的关系 相同点： 都是基于tcp的，都是可靠性传输协议 都是应用层协议 不同点： WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息 HTTP是单向的 WebSocket是需要浏览器和服务器握手进行建立连接的 而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接 联系： WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的 总结（总体过程）： 首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等； 然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据； 最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

1. 拖拽 drap drop API

2. 拖拽事件 源对象(draggable元素): 正在被拖动的对象, 该元素的draggable属性应被设置为true 目标对象: 拖拽到的目标对象,需要对元素的drag事件进行监听，并做相应操作才能转化为droppable元素

3. JS拖拽事件 事件 事件处理函数 作用对象 描述 drag ondrag 源对象 源文件被拖动触发 dragstart ondragstart 源对象 用户开始拖拽源对象 dragend ondragend 源对象 用户结束拖拽操作(例如释放鼠标按键和点击ESC按键) dragenter ondragenter 目标对象 拖拽源对象进入目标对象 dragover ondragover 目标对象 源对象处于目标对象上方(每几百毫秒触发一次) dragleave ondragleave 目标对象 源对象离开目标对象区域 dragexit ondragexit 目标对象 元素不再为可被选择的目标对象 drop ondrop 目标对象 源对象落在目标对象上

4. 拖动案例

7、WEB 标准以及 W3C 的理解与认识?

1. 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构行为表现的分离，
2. 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，
3. 容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

8、lframe 的作用?

用法: lframe 是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。优点:便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。

缺点
(1) iframe 的创建比一般的 DOM 元素慢了 1-2个数量级
(2) iframe 标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好在 Safari 和Chrome 中可以通过js 动态设置iframe 的 src 属性来避免阻塞
(3) iframe 对于 SEO 不友好，替代方案一般就是动态语言的Incude 机制和aiax动态填充内容等.

9、对HTML5的一些新的特性掌握哪些（比如：SVG，Canvas，WebSocket）

新特性：包括语义化标签、视频和音频标签、canvas绘图、Web存储、Web Workers等

• SVG可以创建精美的矢量图形；

• Canvas可以提供一个可绘画的区域，可以绘制2D和3D图形；

• 而WebSocket可以让浏览器和服务器之间实时双向通信。

这些新特性为Web开发带来了更好的交互性和更丰富的用户体验。

CSS

1、掌握哪一种CSS样式选择器？ CSS样式的权重优先级如何计算？

• 选择器优先级： !Important>行内样式>ID 选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性 :::tips !important：!important拥有最高的优先级，加上!importanrt可以覆盖父级的样式，使用方法为直接在样式后添加加上!importanrt，如 color : red !important;

行内样式：行内样式指写在标签style属性中的样式，优先级仅次于!important，缺点为多个元素难以共享样式，不利于代码复用；HTML和CSS代码混杂，结构样式没有分离，不利于后期维护。所以建议尽量少使用行内样式。 ID选择器：ID 选择器会根据该元素的 ID 属性中的内容匹配元素，一个id只能使用一次。 类选择器：类选择器会根据元素的类属性中的内容匹配元素，可以重复使用，是最常用的选择器。 标签选择器：标签选择器是指用HTML标签名称作为选择器，优点是能快速为页面中同类型的标签统一样式，缺点是不能设计差异化样式。 通配符选择器：通配符选择器为*，指给当前界面上所有的标签设置属性。由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。 继承：继承指当子元素没有设置某个属性时，会继承父元素的属性。 浏览器默认属性：浏览器本身设置好的属性，若未对元素设置属性，则会设置为浏览器默认属性。

注：关于继承的详情

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-break-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。 ::: 二、CSS权重 * 1.权重：** 第一等 ：内联样式，如：style="color:red;"，权值为 1000.（该方法会造成 css 难以管 理，所以不推荐使用）。 第二等 ：ID 选择器，如：#header，权值为 0100。 第三等 ：类、伪类、属性选择器如：.bar， 权值为 0010。 第四等 ：标签、伪元素选择器，如：div ::first-line 权值为 0001。 最后把这些值加起来，再就是当前元素的权重了。 其他 ： 无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义 的元素样式。（ie6 支持上有些 bug） 通配符，子选择器，相邻选择器等。如，>,+, 权值为 0000。 继承的样式没有权值。 ** 2.CSS 权重计算方式** 2.1.计算选择符中的 ID 选择器的数量（=a） 2.2.计算选择符中类、属性和伪类选择器的数量（=b） 2.3.计算选择符中标签和伪元素选择器的数量（=c） 2.4.忽略全局选择器 2.5.在分别计算 a、b、c 的值后，按顺序连接 abc 三个数字组成一个新的数字，改值即 为所 计算的 选择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。 示例：

div#app.child[name="appName"] /*a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121*/

      注：CSS 选择器：
            1、id 选择器（ # myid）
            2、类选择器（.myclassname）
            3、标签选择器（div, h1, p）
            4、相邻选择器（h1 + p）
            5、子选择器（ul > li）
            6、后代选择器（li a）
            7、通配符选择器（ * ）
            8、属性选择器（a[rel = "external"]）
            9、伪类选择器（a:hover, li:nth-child）

2、什么是栅格体系？什么是响应式布局？

栅格体系 含义：是指采用JavaScript语言来实现响应式网格布局，可以在不同的屏幕尺寸下自适应地调整元素的大小和位置。它通常用于网站UI设计和前端开发中，可以帮助设计师和开发者更方便地实现布局和排版。

• 响应式 ------ 根据屏幕的不同分辨率，展示不同的样式

• 自适应 ------ 在不同的设备上加载不同的样式 ------- 必须使用js文件

响应式布局 答案同上

3、CSS3 新特性有哪些?

1.颜色:新增 RGBA，HSLA 模式
2.文字阴影 (text-shadow)
3.边框: 圆角(border-radius)
边框阴影: box-shadow
4.盒子模型: box-sizing
5.背景:
background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域以”，”分隔可以设置多背景，用于自适应布局
6.渐变: linear-gradient、 radial-gradient
7.过渡: transition，可实现动画
8.自定义动画
9.在 CSS3 中唯一引入的伪元素是
selection.
10.媒体查询，多栏布局
11.border-image
12.2D 转换: transform: translate(x，y)
rotate(x，y) skew(x，y) scale(x，y)
13.3D 转换

4、WebStorm 和vsCode

 WebStorm和vsCode一样也是一款开发神器。但是WebStorm无需下载vscode一样的很多插件，很多东西都已经配置好了，所以得学习里面的规则。

5、CSS如何实现字体小于12px的效果

1、移动端

.font{   // 10px / 12px = 0.83   transform: scale(0.83);}

2、PC端 避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;

.font{   font-size: 12px;   transform: scale(0.83,0.83) ;   *font-size: 10px;}

6、怎么画出0.5px的线

transcale(0.5)

7、圣杯布局（双飞翼布局）

圣杯布局和双飞翼布局的目的：

• 三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。

• 两侧内容固定，中间内容随着宽度自适应。

• 一般用于 PC 网页。

圣杯布局和双飞翼布局的技术总结：

• 使用 float 布局。

• 两侧使用 margin 负值，以便和中间内容横向重叠。

• 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

具体代码：

// todo 圣杯布局

// HTML

  
我是中间
  
我是左边
  
我是右边

// CSS

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: lightcyan;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



// 双飞翼布局

// HTML

  
main

left
right

// CSS

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}

tips：

上述代码中 margin-left: -100% 相对的是父元素的 content 宽度，即不包含 paddig 、 border 的宽度。 其实以上问题需要掌握 margin 负值问题 即可很好理解。

8、移动端适配

怎么做移动端的样式适配？- 题目详情 - 前端面试题宝典

9、flex布局设置水平垂直居中

具体代码

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

10、水平垂直居中的方式

1、flex布局 2、子绝父相， position: absolute 和 transform: translate(-50%, -50%)。 3、table布局 4、grid网格布局

11、px、em、rem取用有何依据

1. px 是绝对单位，固定的像素，一旦设置了就无法因为适应页面大小而改变
2. em 和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
3. em是相对长度单位，相对自身font-size，没有则相对于父元素，
4. rem相对于根元素的font-size

12、css sprites，如何使用？

目的：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量

方法：再利用 css 的“background-image”、“background-repeat”、
“background-position”的组合进行背景定位

13、less预处理器

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

#less中的变量
#使用@来申明一个变量：@pink：pink;

14、Sass预处理器

15、如何实现单行/多行文本溢出的省略样式?

使用 CSS 的 text-overflow 属性来实现单行文本溢出的省略样式， 
使用 white-space 和 overflow 属性来实现多行文本溢出的省略样式。

16、什么是css reset是什么？ normalize.css是什么？

Reset 重置浏览器的 css 默认属性 ，浏览器的品种不同，样式不同，然后重置，让他们统一。（暴力的，强制的）

• Normalize.css 是 css reset 的替代方案，保护有用的浏览器默认样式而不是完全去掉它们（温和的，根据浏览器特性的）
• 一般化的样式：为大部分 HTML 元素提供
• 修复浏览器自身的 bug 并保证各浏览器的一致性
• 优化 CSS 可用性：用一些小技巧
• 解释代码：用注释和详细的文档来。

17、CSS中的渐进增强、优雅降级之间的区别

   渐进增强 (progressive enhancement) : 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 (从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。)
    
   优雅降级 (graceful degradation) :一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。(Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的IE 的 hack 实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)
   
   区别:优雅降级是从复杂的现状开始，并试图减少用户体验的供给而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

18、清除浮动有几种方式?（三种即可）

额外标签法:在浮动元素的最后添加一个块级标签，给其设置一个clear:both 的属性 (缺点:会在页面上产生很多空白标签);

给浮动元素的父元素设置高度:(缺点:不太灵活)

给浮动元素的父元素设置 overflow:hidden;

使用伪元素法:(推荐使用)

19、CSS盒子模型

IE盒模型（border-box）
IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content + padding + border 。

W3C标准盒模型（content-box）
W3C 标准盒模型：属性 width ，height 只包含内容 content，不包含 border 和 padding 。

20、简述flex的组成部分

Flex布局/弹性布局特点：
 是一种浏览器提倡的布局模型。
布局网页更简单、灵活。
避免浮动脱标的问题

作用：
 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

设置方式 :
  父元素添加 display: flex，子元素可以自动的挤压或拉伸。
组成部分 ：
 弹性容器
 弹性盒子
 主轴
 侧轴/交叉轴

21、字体图标的优点以及使用步骤

字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器

使用方法：
Unicode法
先引入iconfont.css文件
复制粘贴图标对应的Unicode编码
设置文字字体

类名引用
先引入iconfont.css文件
调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
设置文字字体

22、css权重如何计算

	页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者.
	特殊性表述为 4 个部分：0,0,0,0
	一个选择器的特殊性如下:
		对于选择器是#id 的属性值,特殊性值为：0,1,0,0
		对于属性选择器，class 或伪类，特殊性值为：0,0,1,0
		对于标签选择器或伪元素，特殊性值为：0,0,0,1
		通配符‘*’特殊性值为：0,0,0,0
		内联样式特殊性值为：1,0,0,0

23、display有哪些值？说明他们的作用?

none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留
inline（默认值）：表示指定对象为内联元素
block： 指定对象为块元素。
list-item： 指定对象为列表项目
inline-block： 指定对象为内联块元素。（这是CSS2中的属性）
table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签table（CSS2）
table-caption： 指定对象作为表格标题。类同于html标签caption（CSS2）
table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）
table-row： 指定对象作为表格行。类同于html标签tr（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签tbody（CSS2）
table-column： 指定对象作为表格列。类同于html标签col（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签colgroup（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签thead（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签tfoot（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

24、image边框图片的用法

边框图片需要通过4个属性来设置
border-image-source 用在边框图片的路径(确定图片)
border-image-slice  图片边框向内偏移(裁剪的尺寸,一定不加单位,上右下左的顺序)
border-image-width  边框的宽度(需要加单位)
border-image-repeat 用于设置边框图片是否应该平铺,铺满或拉伸(默认拉伸)

25、flex常用的容器属性

常用容器属性有:
flex-direction,取值:
		row; // 默认 横向 从左往右依次排列所有项目
		row-reverse; // 横向 从右往左依次排列所有项目
		column; // 纵向 从上往下依次排列所有项目
		column-reverse; // 纵向 从下往上依次排列所有项目

flex-wrap,取值: 
		nowrap; // 默认 一行显示所有项目（项目超出宽度减少项目宽度）
		wrap; //  从左往右显示，宽度不够往下换一行接着显示 (项目超出宽度自动换行)
		wrap-reverse; // 从最下面一行依次从左往右显示，宽度不够往上换行接着显示

flex-flow,是flex-direction和flex-wrap的简写 
取值: column wrap; // 从上往下排列 空间不够自动换行

justify-content,取值:
		center; // 居中对齐
		space-between; // 第一个项目排在起点 最后一个项目排在终点 均匀排列每个元素
		space-around;  // 每个元素周围分配相同的空间 均匀排列每个元素

align-items,取值: 
		flex-start; // 垂直方向 顶点对齐
		flex-end; // 垂直方向 底部对齐
		center; // 垂直方向 居中对齐
		baseline; // 垂直以基线对齐

align-content,该属性对单行弹性盒子模型无效,取值: 
		center; // 垂直方向 将项目放置在中点
		space-between; // 第一列项目排在顶点 最后一列项目排在底部 均匀分布项目
		space-around; //  均匀分布项目

26、盒子塌陷的原因？解决方式

原因
情况一：浮动元素无法撑开标准流的父元素，导致父元素高度塌陷
解决方法：
1.直接给父元素设置该高度
2.使用额外标签法清除浮动
3.使用单伪元素清除法
4.使用双伪元素清除法
给父元素设置overflow:hidden
情况二：互相嵌套的块级元素，给子元素设置margin-top，父子元素的margin-top会合并，父元素会一起往下移动
1.给父元素设置border-top
2.给父元素设置padding-top
3.设置浮动
4.转换成行内块元素
5.给父元素设置overflow:hidden

27、less和scss的区别

1，编译环境不同，scss是通过ruby 在服务器端处理，less是通过js编译,在客户端处理
2，变量符不一样，less是用@,scss是用$
3，scss支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持。
4，工具库不同

28、CSS画三角形

29、rgba和opacity的透明效果有什么不同？

rgba ()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba ()只作用于元素的颜色或其背景色。

30、如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

  使用 float 左浮左边栏
  右边模块使用 margin-left 撑出内容块做内容展示
  为父级元素添加BFC，防止下方元素飞到上方内容


实现三栏布局中间自适应的布局方式有：
  两边使用 float，中间使用 margin
  两边使用 absolute，中间使用 margin
  两边使用 float 和负 margin
  display: table 实现
  flex实现
  grid网格布局

31、BFC是什么？说说它的触发条件？

BFC（Block Formatting Context）：
    #即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
1、内部的盒子会在垂直方向上一个接一个的放置
2、对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
3、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
4、BFC的区域不会与float的元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
   BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发BFC的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

32、如何实现单行/多行文本溢出的省略样式?

可以使用 CSS 的 text-overflow 属性来实现单行文本溢出的省略样式， 使用 white-space 和 overflow 属性来实现多行文本溢出的省略样式。

AJAX

1、AJAX 请求数据步骤是什么？传输的数据是用的 get 还是 post

步骤：
    1、创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    2、创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    3、设置响应HTTP请求状态变化的函数.
    4、发送HTTP请求.
    5、获取异步调用返回的数据.
    6、使用JavaScript和DOM实现局部刷新.
    
get和post请求的区别：

1、GET没有请求主体，使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send('name=cat&age=10')
4、POST需要设置请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制
7、GET请求有缓存相对没那么安全，但是可添加到收藏夹上，POST没有缓存，无法添加到收藏夹

2、同源策略

同源源策略是浏览器的一项安全策略，浏览器只允许 js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略
   
   为什么会有同源策略？
   我们都知道 JavaScript 可以操作 web 文档的内容，试想，如果不对这一点加以限制，那么 JS 可以做的事情就太多了，危险性也太高，所以就针对它可以操作哪些文档的内容有了一个限制，这个限制就是同源策略。
同源策略在什么情况下会起作用呢？
   当 web 页面使用多个