前端面试题及答案汇总

盼盼盼

已于 2024-07-19 05:47:34 修改

阅读量6.3w

点赞数 89

分类专栏：前端面试题 javascript 文章标签：前端 javascript vue.js reactjs

于 2020-03-26 14:39:55 首次发布

本文链接：https://blog.csdn.net/come0across/article/details/104895118

版权

前端同时被 3 个专栏收录

40 篇文章 2 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

面试题

3 篇文章 1 订阅

订阅专栏

文章目录

写在最开始：
工作以来，感觉自己会的东西还算多，但是面试时就答不出来、答不全面，究其原因，则是自己从来没有认真深挖、整理所有的知识点，每个知识点，都只是了解了皮毛，所以还是决定从今天开始，重新学习，并记录重要的知识点。

1. 浏览器篇

1.1 常用那几种浏览器测试？主流浏览器的内核有哪些？

Q1：IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。

1.2 说说你对浏览器内核的理解？

浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器
JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快

1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：
a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
b.服务器将得到的 HTML 文件发送给浏览器；
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
5.断开连接

1.4 浏览器缓存

1.sessionStorage
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能存储持久化
2.localStorage
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3.cookie
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
4.userData
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB

1.5. HTTP

1.5.1 http状态码

以 2xx 为开头的都表示请求成功响应.

状态码	含义
200	请求成功
204	请求处理成功，但是没有资源可以返回
206	对资源某一部分进行响应，由Content-Range 指定范围的实体内容。

以 3xx 为开头的都表示需要进行附加操作以完成请求

状态码	含义
301	永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI
302	临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。
303	该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
304	该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307	临时重定向。该状态码与 302 Found 有着相同的含义。

以 4xx 的响应结果表明客户端是发生错误的原因所在。

状态码	含义
400	该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401	该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。
403	该状态码表明对请求资源的访问被服务器拒绝了。
404	该状态码表明服务器上无法找到请求的资源。

以 5xx 为开头的响应标头都表示服务器本身发生错误

状态码	含义
500	该状态码表明服务器端在执行请求时发生了错误。
503	该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

1.5.2 URL和URI有什么区别？

URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

1.5.3 HTTP和HTTPS的区别

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

2. HTML篇

2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

1. Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式与兼容模式各有什么区别?
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
3. 你知道多少种Doctype文档类型
HTML 4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）

2.2 说说你对语义化的理解？

语义化的优点有:

代码结构清晰，易于阅读，利于开发和维护
提高用于体验，在样式加载失败时，页面结构清晰
方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

2.3 HTML与XHTML有什么区别?

其基础语言不同
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。
语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。

2.4 页面导入样式时，使用link和@import有什么区别？

1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.5 HTML5有哪些新特性？

语义化标签
语义化标签使得页面的内容结构化，见名知义

标签	描述
`<header></header>`	定义了文档的头部区域
`<footer></footer>`	定义了文档的尾部区域
`<nav></nav>`	定义文档的导航
`<section></section>`	定义文档中的节（section、区段）
`<article></article>`	定义页面独立的内容区域
`<aside></aside>`	定义页面的侧边栏内容
`<detailes></detailes>`	用于描述文档或文档某个部分的细节
`<summary></summary>`	标签包含 details 元素的标题
`<dialog></dialog>`	定义对话框，比如提示框

增强型表单
新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年
新增表单元素：

表单元素	描述
`<datalist>`	元素规定输入域的选项列表，使用元素的 list 属性与元素的 id 绑定
`<keygen>`	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
`<output>`	用于不同类型的输出
新增表单属性

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定元素中可选择多个值。

新增视频和音频标签
Canvas绘图
SVG绘图
地理定位
拖放API
Web Worker
Web Storage
WebSocket

2.6 iframe的优缺点？

优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

2.7 img中的alt与title属性

alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；
alt是img必要的属性，而title不是；
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。

2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？

在HTML中，属性值应该被引号包围。等号“=”用于分隔属性名和属性值。当属性值本身包含引号时，你可以使用不同类型的引号来避免冲突。例如，你可以使用单引号包围属性值，其中属性值本身包含双引号：

<element attribute-name='"a"="b"'></element>

或者，使用双引号包围属性值，其中属性值本身包含单引号：

<element attribute-name="'a'='b'"></element>

如果你需要在HTML中表示一个等于 a=‘b’ 的属性，你可以这样写：

<element attribute-name="'a'='b'"></element>

请注意，这种做法不符合HTML规范，并且可能会导致浏览器解析错误或在使用某些库解析此HTML时产生错误。通常，应避免在HTML属性中包含复杂的JavaScript表达式。

3. CSS篇

3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素（Inline Elements）:

行内元素不会以新行开始，也不会扩展其父元素的整个宽度。它们通常用于文本内容的一小部分，如强调或小范围的格式化。一些常见的行内元素包括：

<span>：用于对文本的一小部分进行标记。
<a>：定义超链接。
<strong>：表示文本内容的强烈重要性。
<em>：表示文本内容的强调。
<img>：嵌入图像。
<input>：定义输入字段。
<label>：定义标签。
<script>：定义客户端脚本。
<textarea>：定义文本区域。

块级元素（Block Elements）:

块级元素开始于新行，并且其宽度默认填满父元素的宽度。它们通常用于定义页面的结构或大块内容的布局。一些常见的块级元素包括：

<div>：块级容器，用于组织内容或布局。
<p>：定义段落。
<header>：定义文档或部分的页眉。
<footer>：定义文档或部分的页脚。
<section>：定义文档中的一个区段。
<article>：定义独立的自包含内容。
<aside>：定义与页面内容略微相关的侧边栏内容。
<nav>：定义导航链接的容器。
<ul>、<ol>和<li>：定义无序列表、有序列表和列表项。
<table>：定义表格。
<fieldset>：定义一组相关表单元素。

CSS盒模型（CSS Box Model）:

CSS盒模型是CSS中用于设计和布局的基本概念，它描述了元素在页面上是如何被渲染的。盒模型包括以下几个部分：

内容（Content）：元素的实际内容，显示文本或图片等。
内边距（Padding）：内容与边框之间的空间，它是透明的并包含在元素的宽度和高度中。
边框（Border）：围绕内边距和内容的线，可以设置其粗细、样式和颜色。
外边距（Margin）：元素与其他元素之间的空间，位于边框的外围。

盒模型的总宽度可以通过以下公式计算：
总宽度=内容宽度+左内边距+右内边距+左边框宽度+右边框宽度+左外边距+右外边距

3.2 清除浮动有哪些方式？

使用额外的清除元素：
在浮动元素后面添加一个额外的块级元素，并使用clear属性来清除浮动。这个属性可以设置为left、right、both，表示清除左浮动、右浮动或两边的浮动。
```
.clear {
    clear: both;
}
```
使用父元素的overflow属性：
给包含浮动元素的父容器设置overflow属性为hidden或auto。这种方法在某些情况下可以清除浮动，但在IE6中可能有问题。
```
.parent {
    overflow: auto; /* 或 hidden */
}
```
使用伪元素（CSS3方法）：
使用:after或:before伪元素和clear属性来清除浮动。这种方法不需要添加额外的元素。
```
.parent::after {
    content: "";
    display: table;
    clear: both;
}
```
使用块级格式化上下文（BFC）：
创建一个新的块级格式化上下文（BFC），可以阻止浮动元素的外边距合并。这可以通过设置overflow为非visible值来实现。
```
.parent {
    overflow: auto; /* 或 hidden */
}
```
使用clearfix类：
clearfix是一个常用的技巧，通过在父元素上添加一个clearfix类来清除浮动。这个类通常使用伪元素来实现。
```
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
```
使用Flexbox：
如果布局允许，可以使用Flexbox布局来避免浮动。Flexbox提供了更灵活的布局方式，可以很容易地对齐和分布元素。
```
.parent {
    display: flex;
}
```
使用Grid布局：
CSS Grid布局是一种新的布局系统，也可以用于避免浮动。它提供了一种在二维空间内对齐和分布元素的方法。
```
.parent {
    display: grid;
}
```
使用浮动的父元素：
在某些情况下，将父元素也设置为浮动可以解决问题，但这可能会影响其他布局。

3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符（选择器）类型：

CSS 提供了多种类型的选择器来指定样式的应用目标：

元素选择器（Type Selector）：根据HTML元素类型选择元素，例如 p 选择所有<p>标签。
类选择器（Class Selector）：使用 . 后跟类名选择具有特定类的元素，例如 .important 选择所有具有 class="important" 的元素。
ID选择器（ID Selector）：使用 # 后跟ID名选择页面上具有特定ID的单一元素，例如 #header 选择 id="header" 的元素。
属性选择器（Attribute Selector）：根据元素属性和属性值选择元素，例如 [type="text"] 选择所有 type 属性为 "text" 的元素。
后代选择器（Descendant Selector）：选择作为某元素后代的所有元素，例如 div p 选择所有在 <div> 内的 <p> 元素。
子选择器（Child Selector）：使用 > 选择某个元素的直接子元素，例如 ul > li 选择所有直接在 <ul> 内的 <li> 元素。
兄弟选择器（Sibling Selector）：
- 相邻兄弟选择器（Adjacent Sibling Selector）：使用 + 选择紧接在另一元素后的元素，例如 h1 + p 选择直接跟在 <h1> 后的 <p> 元素。
- 通用兄弟选择器（General Sibling Selector）：使用 ~ 选择所有先前元素的同级元素，例如 h1 ~ p 选择所有在 <h1> 之后的所有 <p> 元素。
伪类选择器（Pseudo-class Selector）：选择处于特定状态的元素，例如 :hover、:active、:focus 等。
伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，例如 ::before 和 ::after 可用于在元素内容前后插入内容。
通配符选择器（Universal Selector）：使用 * 选择所有元素。

可继承的CSS属性：

一些CSS属性可以被子元素继承，包括但不限于：

color
font-family
font-size
font-weight
font-style
line-height
letter-spacing
text-align
text-indent
visibility
white-space

CSS优先级算法：

CSS选择符的优先级（也称为特异性）决定了当多个样式规则应用于同一元素时，哪个规则将被应用。以下是决定优先级的规则：

内联样式：直接在HTML元素上设置的样式具有最高优先级。
ID选择器：每个ID选择器计为 0,0,1。
类选择器、属性选择器和伪类：每个类选择器、属性选择器或伪类计为 0,1,0。
元素选择器和伪元素：元素选择器和伪元素不增加前两个数字，只增加第三个数字。
继承：继承的样式没有优先级，如果存在冲突，将被其他规则覆盖。
!important规则：如果样式规则包含 !important 声明，它将覆盖其他所有规则，除非另一个 !important 规则具有更高的优先级。
优先级计算方法通常是比较每个选择器的ID、类/属性/伪类和元素/伪元素的数量。选择器越具体，其优先级就越高。如果优先级相同，则最后定义的规则将被应用。

此外，来自同一来源的样式（例如，同一样式表）将根据它们在文档中出现的顺序解析，后面的规则将覆盖前面的规则。如果样式来自不同的来源（如外部样式表和内联样式），则通常内联样式的优先级高于外部样式表。

3.4 CSS3新增伪类有哪些？

:nth-child(n)：选择作为其父元素的第n个子元素的元素。
:nth-last-child(n)：选择作为其父元素的倒数第n个子元素的元素。
:nth-of-type(n)：选择作为特定类型元素的第n个兄弟元素。
:nth-last-of-type(n)：选择作为特定类型元素的倒数第n个兄弟元素。
:first-of-type：选择作为其父元素中第一个特定类型元素的元素。
:last-of-type：选择作为其父元素中最后一个特定类型元素的元素。
:only-of-type：选择作为其父元素中唯一的特定类型元素的元素。
:only-child：选择作为其父元素中唯一的子元素的元素。
:empty：选择没有子元素的元素。
:target：选择当前活动的URL片段标识符对应的元素。
:enabled：选择可用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择被选中的radio或checkbox元素。
:not(selector)：否定伪类，选择不匹配给定选择器的元素。
:root：选择文档的根元素，通常是HTML元素。
:indeterminate：选择一个不确定状态的复选框或单选按钮。
:default：选择默认的按钮元素，如提交按钮。
:in-range 和 :out-of-range：选择输入值在指定范围内或范围外的输入元素。
:required 和 :optional：选择表单中需要或不需要填写的输入元素。
:valid 和 :invalid：选择输入值有效或无效的输入元素。

3.5 CSS3中的伪类：:not() 有什么特别的用途吗？

CSS3中的伪类 :not() 是一个否定伪类，它具有独特的用途，主要表现在以下几个方面：

排除特定选择器：:not() 允许开发者指定一个选择器，然后从一组元素中排除掉匹配该选择器的元素。这意味着你可以对几乎所有元素应用样式，但同时排除那些你不想影响的元素。
简化CSS选择：在没有 :not() 的情况下，要实现类似的效果可能需要编写多个选择器和使用多个否定符号。:not() 的存在简化了这些情况，使得CSS更简洁、更易于阅读和维护。
提高样式的灵活性：:not() 提供了一种灵活的方式来定义样式规则，特别是当你想要对一个元素组中的大多数元素应用样式，但需要对其中的一小部分元素进行特殊处理时。
组合使用其他伪类：:not() 可以与其他伪类结合使用，如 :nth-child()、:first-child、:last-child 等，来创建更具体的选择器，实现更复杂的样式规则。
实现复杂的布局：在一些复杂的布局设计中，:not() 可以帮助开发者排除某些元素，以便它们不受全局样式的影响，这对于实现特定的设计效果非常有用。
增强可访问性：在某些情况下，:not() 可以用来增强网页的可访问性，例如，通过排除某些对屏幕阅读器用户不友好的元素。
响应动态内容变化：:not() 可以用于响应由JavaScript或其他客户端脚本动态添加或修改的类，因为它允许开发者根据元素的当前状态来应用样式。
使用 :not() 伪类时，你可以将其放在任何标准CSS选择器之前，以排除那些你不想匹配的元素。例如：

/* 选择所有的段落，除了类名为"highlight"的段落 */
p:not(.highlight) {
    color: #333;
}

这个例子中，所有没有 highlight 类的 <p> 元素都将应用 color: #333; 样式，而具有 highlight 类的 <p> 元素则不会被这个规则影响。

3.6 如何居中div？

水平居中

使用文本对齐（Inline Block）:
如果你的 div 显示为内联块（display: inline-block;），你可以使用 text-align: center; 来居中它的文本内容。
```
.parent {
    text-align: center;
}
.child {
    display: inline-block;
}
```
使用Flexbox:
使用CSS的Flexbox布局模型，可以很容易地实现水平居中。
```
.parent {
    display: flex;
    justify-content: center;
}
```

使用绝对定位和负边距:
如果你知道 div 的宽度，你可以使用绝对定位和负边距来居中它。

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

垂直居中

使用Flexbox:
同样使用Flexbox，可以很容易地实现垂直居中。

.parent {
    display: flex;
    align-items: center;
    justify-content: center; /* 如果同时需要水平居中 */
}

使用绝对定位和transform:
使用绝对定位和transform属性也可以实现垂直居中。

.parent {
    position: relative;
    height: 100vh; /* 父元素高度 */
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

水平和垂直居中

结合上述方法，你可以同时实现水平和垂直居中：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 确保父元素有一个高度 */
}
.child {
    /* 子元素的宽度和高度根据需要设置 */
}

3.7 为什么要初始化CSS?

初始化CSS（也称为CSS Reset或Normalize.css）是前端开发中常见的做法，它具有以下几个主要目的：

一致的样式表现：不同的浏览器对HTML元素有不同的默认样式，这可能导致在不同浏览器中页面显示不一致。初始化CSS通过定义统一的样式规则，确保所有浏览器中元素的样式表现一致。
减少冗余代码：通过预先设置一些通用的样式规则，开发者可以减少在其他CSS文件中重复编写这些规则的次数，从而提高开发效率。
避免意外的继承：CSS的继承机制可能导致子元素意外地继承了父元素的样式，这可能不是开发者所期望的。初始化CSS可以清除或统一这些默认样式，避免意外继承。
提高页面性能：通过减少浏览器的渲染时间，初始化CSS有助于提高页面加载和渲染的性能。
简化开发流程：使用初始化CSS可以简化开发流程，因为开发者可以依赖一套预定义的样式规则，而不需要每次都从零开始。
增强可维护性：初始化CSS为项目提供了一个统一的起点，使得代码更加整洁和可维护。
适应不同的布局需求：有些布局技术（如Flexbox或Grid）可能需要特定的盒模型设置，初始化CSS可以确保这些布局技术能够按预期工作。
避免全局样式污染：在大型项目中，多个组件或模块可能会使用不同的样式，初始化CSS有助于避免全局样式影响到这些局部样式。
提供样式的默认基线：初始化CSS为页面上的元素提供了一个样式的默认基线，开发者可以在此基础上添加或修改样式，而不必担心浏览器默认样式的干扰。

常见的CSS初始化方法包括使用CSS Reset（将元素样式重置为默认值）或Normalize.css（在不同浏览器中提供一致的样式基线）。

3.8 说说你对BFC规范的理解？

一、什么是BFC？
　　BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
　　1、float：给元素添加浮动（属性值为left、right，但none除外）
　　2、position：给元素添加定位（属性值为absolute或fixed）
　　3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）
　　4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）
三、BFC形成后出现的常见问题
　　1、margin重叠问题
　　2、浮动相关问题

3.9 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

1. position 属性

position 属性指定了元素的定位方式，主要有以下取值：

static：默认值，元素按照正常的文档流进行排列。
relative：元素相对于其正常位置进行定位。
absolute：元素相对于其最近的已定位（非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的 <html> 元素定位。
fixed：元素相对于浏览器窗口进行定位，即使滚动页面，元素也会停留在窗口的固定位置。
sticky：元素根据用户的滚动位置进行定位。它结合了 relative 和 fixed 的特点，当元素在视口中达到某个阈值时，它会变成固定位置。

2. float 属性

float 属性用于将元素放置在文档流中的一行，使其围绕其他元素（通常是文本）进行定位。float 的主要取值有：

left：元素浮动到包含块的左边缘。
right：元素浮动到包含块的右边缘。
none：默认值，元素不浮动。

浮动元素会脱离文档流，但仍然保留其在文档流中的宽度，影响其他元素的布局。

3. display 属性

display 属性定义了元素的显示类型，影响元素在页面上的布局和可见性。一些常见的取值包括：

block：元素显示为块级元素，独占一行，可设置宽度和高度。
inline：元素显示为内联元素，和其他元素在同一行显示。
inline-block：元素保持内联特性，但可以设置宽度和高度。
flex：元素使用Flexbox布局，其子元素可以进行弹性布局。
grid：元素使用Grid布局，可以创建复杂的网格布局。
none：元素不显示，不占据空间。

互相影响

当 position 设置为 absolute 或 fixed 时，元素会脱离文档流，不受 float 影响，且不会影响其他元素的布局。
float 元素可以被 position 为 relative 的元素包含，但不会被子元素的 position: absolute 或 position: fixed 包含。
display 属性可以改变元素的布局类型，这会影响元素是否可以设置宽度和高度，以及它如何与其他元素一起布局。例如，display: none 会移除元素及其子元素，而 display: block 会使其占据整行。
float 元素通常与 display: block 结合使用，因为内联元素不支持浮动。
position 和 float 都可以使元素脱离文档流，但 position: absolute 或 position: fixed 的元素不会影响其他元素的布局，而浮动元素会影响周围元素的布局。

3.10 纯CSS实现三角形

.box {
	width:0px;
	height:0px;
	border-top:50px solid rgba(0,0,0,0);
	border-right:50px solid  rgba(0,0,0,0);
	border-bottom:50px solid red;
	border-left:50px solid  rgba(0,0,0,0);
}

/* 或者用transparent */
.div{
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

3.11 CSS Reset 和 Normalize.css 有什么区别，我应该如何选择？

CSS Reset和Normalize.css都是用来解决浏览器默认样式不一致问题的，但它们采用的方法和目标有所不同：

CSS Reset：
- 目的是将所有元素的样式重置为一个空白状态，即样式表中通常使用margin、padding、border等属性的0值来重置。
- 它通过覆盖HTML元素的默认样式，提供一个完全中性的起点，让开发者从头开始定义页面样式。
- 由于它移除了所有的默认样式，开发者可能需要重新定义一些基本的样式，比如列表的符号、表单元素的内边距等。
Normalize.css：
- Normalize.css不是重置所有样式，而是旨在修复浏览器的默认样式中的bug和不一致性，同时保留语义化和可访问性。
- 它通过修复常见的跨浏览器兼容性问题，提供一个更加一致的起点，同时保留一些有用的默认样式，如列表项的符号、标题的大小等。
- Normalize.css的目标是减少工作量，避免不必要的全局样式重置。

如何选择：

项目大小和复杂性：对于大型或复杂的项目，Normalize.css可能是更好的选择，因为它提供了一个更加细致和平衡的重置，保留了一些有用的默认样式。
个人或团队偏好：如果你或你的团队更喜欢从一个完全空白的画布开始工作，CSS Reset可能更合适。
浏览器兼容性要求：如果你需要支持非常古老的浏览器，Normalize.css可能提供了更好的兼容性保证。如果你主要关注现代浏览器，CSS Reset提供了更多的控制权。
维护和更新：Normalize.css作为一个流行的项目，定期接收更新以修复新发现的浏览器兼容性问题。如果你需要确保样式表随着浏览器更新而更新，选择Normalize.css可能更合适。
开发速度：如果你希望快速开发并且不想处理浏览器默认样式的不一致性，Normalize.css提供了一个快速的解决方案。

最终，选择哪一种取决于你的具体需求、项目要求以及个人偏好。有些开发者甚至会选择结合使用两者，或者在Normalize.css的基础上进行一些额外的重置。

4. JS篇

4.1 面向对象

面向对象（Object-Oriented，OO）是一种编程范式，它基于“对象”这一概念来设计软件。对象可以包含数据（属性）和代码（方法或函数），它们共同描述了现实世界中的实体及其行为。面向对象的核心思想是通过将数据和处理数据的函数结合在一起，来模拟现实世界中的对象和它们之间的交互。

面向对象编程（OOP）具有以下基本特征：

封装（Encapsulation）：封装是将对象的实现细节隐藏起来，只暴露出一个可以被外界访问的接口。这有助于减少代码间的依赖，提高安全性和易于维护。
继承（Inheritance）：继承是一种机制，允许一个类（子类）继承另一个类（父类或基类）的属性和方法。这支持了代码的复用，并可以创建出一个类的层次结构。
多态（Polymorphism）：多态性允许同一个接口或方法名用于不同的数据类型。在运行时，程序会根据对象的实际类型来调用相应的方法，这使得同一个操作可以作用于不同的对象上。
抽象（Abstraction）：抽象是简化复杂的现实世界问题的过程，通过提取关键特征来创建模型。在面向对象中，这通常通过定义抽象类和接口来实现。

面向对象编程的优势包括：

提高代码的可维护性：通过封装和模块化，代码更易于理解和维护。
促进代码复用：继承允许现有代码的重用，减少了重复编写相同功能的需要。
增强代码的灵活性和扩展性：通过继承和多态，可以轻松扩展现有系统的功能。
提高开发效率：面向对象的方法可以加快开发过程，尤其是在团队协作的环境中。

4.2 什么是闭包？闭包的特性是什么？

闭包是能够读取其他函数内部变量的函数
要理解闭包，首先必须理解Javascript特殊的变量作用域
闭包的特性：
1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。

4.3 继承

4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）

4.5 介绍一下new 操作符。New操作符具体干了什么？

1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。

4.6 HTML5离线存储

4.7 JS的数据类型

基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），
引用数据类型：Object(在JS中除了基本数据类型以外都是对象)
详细请查看：typeof操作符检测变量的数据类型

4.8 null和undefined的区别

4.9 call()和apply()的区别

传参方式不同

fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])

4.10 深拷贝和浅拷贝

4.11 ajax

4.12 数组去重

4.13 this对象

4.14 eval()

1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）
3.由JSON字符串转换为JSON对象的时候可以用eval()

let obj = eval('(' + str + ')');

4.15 什么是UA?

4.16 什么是事件委托？

4.17 promise

Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。

4.18 window.onload和document.ready的区别？哪一个先执行？

一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。只能执行一次，如果有多个，那么第一次的执行会被覆盖
document.ready是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。可以执行多次
所以，document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快

4.19 var、let和const有什么区别

1.var定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；不允许在相同作用域内，重复声明同一个变量。
3.const定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。
详细请查看：var、let、const三者的区别

4.20 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？

5. 前端安全问题

5.1 XSS

跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有：
1、盗用cookie，获取敏感信息。
2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。

5.2 CSRF

跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
防御CSRF攻击：
目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

6. 跨域

6.1 什么是跨域？

6.2 什么是同源策略？

6.3 解决跨域的方法有哪些？

7. 性能优化

7.1 你都用过那种性能优化的方法？

1.尽可能的减少http请求
使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器
2.避免在CSS中使用 Expression
Expression（css表达式)又称Dynamic properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

7.2 CSS Sprite是什么，谈谈这个技术的优缺点

8. Vue篇

8.1 Vue.js是什么？

Vue.js是一个用于构建用户界面的渐进式框架，它从核心功能出发，易于学习和集成，同时提供丰富的生态系统支持。

8.2Vue.js的核心特性有哪些？

Vue.js的核心特性包括响应式数据绑定、组件系统、声明式渲染以及易于上手的API。

8.3 请简述Vue的响应式数据绑定原理。

Vue的响应式数据绑定原理基于MVVM模式，通过Object.defineProperty来劫持数据的getter和setter，当数据变化时，自动更新DOM。

8.4 Vue组件间通信有哪些方式？

Vue组件间通信方式包括props、事件、slot、provide/inject以及Vuex。

8.5 Vue的生命周期钩子有哪些？

Vue的生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。

8.6 什么是Vue的计算属性（computed properties）？

Vue的计算属性是基于它们的依赖进行缓存的属性，只有当依赖发生变化时，计算属性才会重新计算。

8.7 Vue的v-model指令如何工作？

Vue的v-model指令在表单输入和应用状态之间创建双向绑定。

8.8 Vue的指令有哪些，它们是如何被解析和执行的？

Vue的指令包括v-bind、v-model、v-on、v-if、v-for、v-else、v-else-if、v-show、v-cloak等，它们在编译阶段被解析并在渲染时应用。

8.9 请解释Vue的slot元素及其作用。

slot元素用于组件内容的分发，允许在组件的模板中预留一个或多个位置，这些位置可以被组件的使用者填充。

8.10 Vue CLI是什么？它提供了哪些功能？

Vue CLI是一个基于Vue.js的前端项目构建工具，提供项目脚手架、依赖管理、开发服务器、构建工具等功能。

8.11 Vue Router是什么？它是如何实现页面路由的？

Vue Router是一个专为Vue.js应用程序设计的路由管理器，它使用HTML5 history API来实现单页面应用的页面路由。

8.12 Vuex是什么？它如何帮助管理应用的状态？

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库，它集中存储和管理所有组件的状态。

8.13 请描述Vue中的虚拟DOM和实际DOM的区别。

Vue中的虚拟DOM是一个轻量级的DOM树的JavaScript对象，它作为实际DOM的代理，只有当虚拟DOM和实际DOM不同步时，才会更新实际DOM。

8.14 Vue的keep-alive指令是做什么用的？

Vue的keep-alive指令用于缓存不活动的组件实例，避免重复创建和销毁组件，提高性能。

8.15 如何优化Vue应用的性能？

优化Vue应用性能的方法包括使用v-show代替v-if、使用事件的防抖和节流、使用计算属性和侦听器、避免不必要的数据监听、使用Vuex进行状态管理等。

8.16 Vue 3.0带来了哪些新特性？

Vue 3.0的新特性包括Composition API、更好的TypeScript支持、更小的体积、更快的虚拟DOM重写、新的组件定义方式等。

8.17 请解释什么是组件的v-if和v-for指令，以及它们的区别。

v-if是条件渲染指令，用于根据条件渲染元素；v-for是列表渲染指令，用于根据源数据多次渲染元素。

8.18 Vue的SSR（服务端渲染）是如何工作的？

Vue的SSR通过在服务器上渲染Vue组件，然后将HTML发送到客户端，客户端再激活这些静态标记为Vue组件。

8.19 请解释Vue组件的props和事件。

Vue组件的props是父组件向子组件传递数据的方式；事件允许子组件向父组件发送消息。

8.20 Vue的自定义指令如何创建和使用？

Vue的自定义指令允许你向元素添加特殊的行为，通过定义钩子函数来拦截元素的原生事件。

9.React篇

什么是Hook?

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

为什么在 React 中加入 Hook?

1.在无需修改组件结构的情况下复用状态逻辑
2.Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分
3.在非 class 的情况下可以使用更多的 React 特性

10. Angular篇

11.其他

11.1 后台系统的权限控制与管理

答案：后台管理系统的权限控制------前端权限管理

盼盼盼

关注

89
点赞
踩
777

收藏

觉得还不错? 一键收藏
14
评论
前端面试题及答案汇总

闭包是能够读取其他函数内部变量的函数要理解闭包，首先必须理解Javascript特殊的变量作用域闭包的特性：1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。2.属性和方法被加到this引用的对象中。
复制链接

扫一扫

专栏目录