一、前端基础

（一）HTTP/HTML/浏览器

1、说一下 http 和 https

https 的 SSL 加密是在传输层实现的。
(1)http 和 https 的基本概念
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。
(2)http 和 https 的区别？
http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。

主要的区别如下： Https 协议需要 ca 证书，费用较高。 http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443 http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

(3)https 协议的工作原理
客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：客户使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。 web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。 web 服务器通过自己的私钥解密出会话密钥。 web 服务器通过会话密钥加密与客户端之间的通信。

(4)https 协议的优点
使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 http 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。谷歌曾在 2014 年 8 月份调整搜索引擎算法，并称“比起同等 HTTP 网站，采用 HTTPS 加密的网站在搜索结果中的排名将会更高”。

(5)https 协议的缺点
https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。 https 缓存不如 http 高效，会增加数据开销。 SSL 证书也需要钱，功能越强大的证书费用越高。 SSL 证书需要绑定 IP，不能再同一个 ip 上绑定多个域名，ipv4 资源支持不了这种消耗。

2、tcp 三次握手，一句话概括

客户端和服务端都需要直到各自可收发，因此需要三次握手。

三次握手可以简化为：C 发起请求连接 S 确认，S也发起连接 C 确认
我们再看看每次握手的作用：
第一次握手：S 只可以确认自己可以接受 C 发送的报文段第
二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认自己可以接受 S 发送的报文段
第三次握手：S 可以确认 C 收到了自己发送的报文段
参考文章

3、TCP 和 UDP 的区别

（1）TCP 是面向连接的，UDP是无连接的即发送数据前不需要先建立链接。
（2）TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。并且因为 tcp 可靠，面向连接，不会丢失数据因此适合大数据量的交换。
（3）TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
（4）TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。
（5）TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
（6）TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

（二）CSS

1、说一下 css 盒模型

简介：就是用来装页面上的元素的矩形区域。
CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
box-sizing(有 3 个值)：border-box,padding-box,content-box.
标准盒子模型：

IE 盒子模型：

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：标准盒子模型的盒子宽度：左右 border+左右 padding+width IE 盒子模型的盒子宽度：width
在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右 padding+width 也很好理解性记忆，包含什么，width 就从什么开始算起。

2、画一条 0.5px 的边框线

首先直接这样设置

  border: 0.5px solid red;

0.5px的边框，肯定是不对的，边框大小会向上取整。
（1）box-shadow阴影实现的思路
既然border不能设置小数的边框，那我们能不能找一个属性有相似的效果来替代它呢，当然可以，我们可以用box-shadow属性用阴影达到0.5px的边框效果，box-shadow阴影属性是允许小数值的，我们可以用它达到单条边框和四条边框。

   <style>div {box-sizing: border-box;background-color: blueviolet;width: 200px;height: 200px;margin: 100px auto;/* border: 1px solid red; */box-shadow: 0px 0px 0px 0.5px green;}</style>
</head><body><div></div>
</body>

（2）::after定位伪类实现的思路
直接设置伪类元素，设置指定的高度，通过定位来控制位置。

 <style>div {position: relative;box-sizing: border-box;background-color: blueviolet;width: 200px;height: 200px;margin-top: 10px;/* box-shadow: 0px 0px 0px 0.5px green; */}div::after {position: absolute;content: "";background-color: red;width: 100%;height: 0.5px;bottom: 0px;}</style>
</head><body><div></div>
</body>

（3）transform 缩放实现的思路
我们可以设置任意大小的边框，改变中心点，通过缩放效果（找好倍率）来达成想要的结果

<style>div {position: relative;box-sizing: border-box;background-color: blueviolet;width: 200px;height: 200px;margin-top: 10px;/* box-shadow: 0px 0px 0px 0.5px green; */}div::after {position: absolute;content: "";width: 200%;height: 200%;border: 1px solid red;transform-origin: 0 0;transform: scale(0.5);}</style>
</head><body><div></div>
</body>

（4） border-image: linear-gradient 边框线性渐变的思路
同样设置任意大小的边框，通过渐变属性改变一部分边框的颜色效果，比如将一部分边框融入背景，这样就能得到想要的效果。

   <style>div {position: relative;box-sizing: border-box;background-color: blueviolet;width: 200px;height: 200px;margin-top: 10px;/* box-shadow: 0px 0px 0px 0.5px green; */}div::after {display: block;position: absolute;content: "";width: 100%;height: 1px;bottom: 0px;background-color: red;background: linear-gradient(to bottom, transparent 50%, red 50%);}</style>
</head><body><div></div>
</body>

3、link 标签和 import 标签的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。 link 方式样式的权重高于@import 的

4、transition 和 animation 的区别

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from … to，而 animation 可以一帧一帧的。

5、Flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。简单的分为容器属性和元素属性

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上。

flex-direction：决定主轴的方向（即项目的排列方向），可选row | row-reverse | column |
column-reverse;
flex-wrap：定义，如果一条轴线排不下，如何换行，可选nowrap | wrap |
wrap-reverse; flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row
nowrap。
justify-content：属性定义了项目在主轴上的对齐方式，可选flex-start | flex-end |
center | space-between | space-around;
align-items：属性定义项目在交叉轴上如何对齐，可选flex-start | flex-end | center |
baseline | stretch; align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上。

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main
size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

6、BFC（块级格式化上下文，用于清除浮动，防止 margin 重叠等）

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。BFC就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，

BFC 区域不会与 float box 重叠，BFC 是页面上的一个独立容器，子元素不会影响到外面计算 BFC 的高度时，浮动元素也会参与计算

哪些元素会生成 BFC:
·body根元素
·设置浮动，不包括none
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex

参看文章

应用：
解决外边距的塌陷问题(垂直塌陷)
利用BFC解决包含塌陷
清除浮动
BFC可以阻止标准流元素被浮动元素覆盖

7、垂直居中的方法

margin:auto 法，定位为上下左右为 0，margin：auto 可以实现脱离文档流的居中

img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0; }

margin 负值法

.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height 的一半*/
margin-left: -240px; /*width 的一半*/
}
其实这里也可以将 marin-top 和 margin-left 负值替换成， transform：translateX(-50%)和 transform：translateY(-50%)

(3)table-cell（未脱离文档流的）设置父元素的 display:table-cell,并且 vertical-align:middle，这样子元素可以实现垂直居中

div{ width: 300px; height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center; }
img{ vertical-align: middle; }

(4)利用 flex 将父元素设置为 display:flex，并且设置 align-items:center;justify-content:center;

.container{ width: 300px; height: 200px; border: 3px solid #546461; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .inner{ 14border: 3px solid #458761; 15padding: 20px; 16}

8、关于 JS 动画和 css3 动画的差异性

首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。

但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。正是由于js对动画的操作复杂度比较高，能对动画有一个比较好的控制，如开始、暂定、回放、终止、取帧等，可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果，以及爆炸特效，且兼容性比较好。

但是，如果帧率过低的话，会导致帧与帧之间的过渡很可能会不自然、不连贯。

缺点：
js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。
其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

优点：
JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

css3（补间动画）

css3动画的制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。当然也可以多次添加关键帧的位置。
因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。
css3在实现一些简单的滑动，翻转等特效的时候会很方便，但是想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。
css3在做动画的时候，浏览器可以对其进行一些优化，会比js使用更少的占用cpu资源，但是效果足够流畅。

缺点：
运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
代码冗长。如果想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。
优点：
浏览器可以对动画进行优化。
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

9、块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度
行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效

10、多行元素的文本省略号

display: -webkit-box ；
-webkit-box-orient:vertical；
-webkit-line-clamp:3 ；//要显示几行就写几
overflow:hidden

11、visibility=hidden, opacity=0，display:none的区别

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

12、双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠。
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

13、position 属性比较

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它元素。

绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。粘性定位详解

默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit: 规定应该从父元素继承 position 属性的值。

14、浮动清除

在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。

方法一：使用带 clear 属性的空元素，注意这个标签必须是块级元素
在浮动元素后使用一个空元素如

，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 <br class='clear />或<hr class="clear/> 来进行清理。

方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加 clear 属性。

方法五：使用 CSS 的:after 伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

方式六：造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可
但是这种方式并不推荐使用，因为有很多局限性，况且son盒子依然是脱离标准流，并没有回到father盒子中，所以做一个简单的了解即可。

参看文章

15、css3 新特性

1.CSS3边框：

border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round

2.CSS3背景：
background-size：属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

3.CSS3文字效果：
text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

4.CSS3 2D转换：
transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。
matrix() :matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

5.CSS3 3D转换：
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);

6.CSS3 过渡：
当元素从一种样式变换为另一种样式时为元素添加效果。

7.CSS3动画：
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

8.CSS3多列：
column-count：属性规定元素应该被分隔的列数。
column-gap：属性规定列之间的间隔。
column-rule ：属性设置列之间的宽度、样式和颜色规则。

9.CSS3用户界面：
resize：属性规定是否可由用户调整元素尺寸。
box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

16、CSS 选择器有哪些，优先级呢

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

同一元素引用了多个样式时，排在后面的样式属性的优先级高；样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 >
标签选择器；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。
继承的样式的优先级比较低，至少比标签选择器的优先级低；
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

17、怎么样让一个元素消失

display:none; visibility:hidden; opacity: 0; 等等

18、css 动画如何实现

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。

transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画

19、CSS3 中对溢出的处理

1、容器宽度：width：value
2、强制文本在一行内显示：white-space：nowrap；
3、溢出内容为隐藏：overflow：hidden；
4、溢出省略号：text-overflow：ellipsis；

overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容；（超出会显示，不超出不显示，只显示y方向的）
inherit：规定应该从父元素继承overflow属性值。

2、空余空间
说明：
white-space：normal、nowwrap、pre、pre-wrap、pre-line、inherit该属性用来社遏制如何处理元素内部的空白
normal：默认值，空白会被浏览器忽略
nowwrap：文本不会换行，文本会在同一行上继续，直到遇到标签为止
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白序列，但是保留换行符
inherit：规定应该从父元素继承white-space属性值；（ie浏览器不支持此属性）

3、省略号显示
说明：
text-overflow：clip、ellipsis
clip：不显示省略号（…），而是简单的裁切；
ellipsis：当对象文本溢出时，显示省略标记；

说明：
text-overflow属性仅仅是…，当行文本溢出时是否显示省略标记，并不具备其他的样式属性定义，
要实现溢出时产生省略号的效果还需要定义；

20、float 的元素，display 是什么

display 为 block

21、隐藏页面中某个元素的方法

position 移到外部，z-index 涂层遮盖等等

（三） JavaScript基础

1、get和post的区别主要有以下几方面：

1、url可见性：

get，参数url可见；

post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数；

post，通过body体传输参数

3、缓存性：

get请求是可以缓存的

post请求不可以缓存

4、后退页面的反应

get请求页面后退时，不产生影响

post请求页面后退时，会重新提交请求

5、传输数据的大小

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）

post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

6、安全性

这个也是最不好分析的，原则上post肯定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩。安全性个人觉得是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都一样。

7、数据包

GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

2、补充 get 和 post 请求在缓存方面的区别

get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。

post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

3、说一下闭包

闭包是指有权访问另一个函数作用域中变量的函数。

创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

闭包的特点
1.让外部访问函数内部变量变成可能

2.变量会常驻在内存中

3.可以避免使用全局变量,防止全局变量污染;

闭包的好处和坏处
好处：可以读取其他函数内部的变量，并将其一直保存在内存中。
坏处：可能会造成内存泄漏或溢出。

闭包有两个常用的用途
闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。

闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

参考文章

4、说一下类的创建和继承

5、如何解决异步回调地狱

promise、generator、async/await
参看文章

6、说说前端中的事件流

HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点击事件 onclick、页面的滚动事件 onscroll 等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个阶段。事件捕获阶段处于目标阶段事件冒泡阶段 addEventListener：addEventListener 是 DOM2 级事件新增的指定事件处理程序的操作，这个方法接收 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。 IE 只支持事件冒泡

7、如何让事件先冒泡后捕获

在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

8、说一下事件委托

简介：事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制

9、说一下图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

10、mouseover 和 mouseenter 的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是 mouseout

mouseenter：当鼠标移到元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是 mouseleave

11、JS 的 new 操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。

12、改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

通过 apply 和 call 改变函数的 this 指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1,arg2…这种形式。

通过 bind 改变 this 作用域会返回一个新的函数，这个函数不会马上执行。

13、JS 的各种位置，比如 clientHeight,scrollHeight,offsetHeight ,以及 scrollTop, offsetTop,clientTop 的区别？

clientHeight：表示的是可视区域的高度，不包含 border 和滚动条 offsetHeight：表示可视区域的高度，包含了 border 和滚动条 scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。 clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0 scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。

14、JS 拖拽功能的实现

首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的具体方法。

clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。

也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft. 还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top 等等值。

15、异步加载 JS 的方法

defer：只支持 IE ，如果您的脚本不会改变文档的内容，可将 defer 属性加入到< script>标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

async，HTML5 属性仅适用于外部脚本，并且如果在 IE 中，同时存在 defer 和 async，那么 defer 的优先级比较高，脚本将在页面完成时执行。创建 script 标签，插入到 DOM 中

16、Ajax 解决浏览器缓存问题

在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。

在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。

在 URL 后面加上一个随机数： “fresh=” + Math.random()。

在 URL 后面加上时间搓：“nowtime=” + new Date().getTime()。

如果是使用 jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录。

17、实现 AJAX 的基本步骤

1、创建XML HttpRequest 对象，即创建一个异步调用对象。

2、创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息
3、设置响应HTTP请求状态变化的函数。
4、发送HTTP 请求。
5、获取异步调用返回的数据。
6、使用JavaScript和DOM 实现局部刷新
参看文章

18、JS 的节流和防抖

参看文章

19、JS 中的垃圾回收机制

必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

这段话解释了为什么需要系统需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript 的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如

var a=“hello world”; var b=“world”; var a=b; //这时，会释放掉"hello world"，释放内存以便再引用

垃圾回收的方法：标记清除、计数引用。

标记清除这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问，所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。

引用计数法
另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值设引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为 1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为 0 的这些值。

用引用计数法会存在内存泄露，下面来看原因： function problem() { var objA = new Object(); var objB = new Object(); objA.someOtherObject = objB; objB.anotherObject = objA; }在这个例子里面，objA 和 objB 通过各自的属性相互引用，这样的话，两个对象的引用次数都为 2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为 0，这样的相互引用如果大量存在就会导致内存泄露。
特别是在 DOM 对象中，也容易存在这种问题： var element=document.getElementById（’‘）； var myObj=new Object(); myObj.element=element; element.someObject=myObj; 这样就不会有垃圾回收的过程。

20、eval 是做什么的

它的功能是将对应的字符串解析成 JS 并执行，应该避免使用 JS，因为非常消耗性能（2 次，一次解析成 JS，一次执行）

21、如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块，比如 JS 文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了 commonJS 规范，AMD，CMD 规范等等，以及用于 JS 打包（编译等处理）的工具 webpack

22、说一下 CommonJS、AMD 和 CMD

参看文章

2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer相关推荐

前端面试题（持续更新中）
全家桶项目源码:Vue全家桶+SSR+Koa2全栈开发美团网[完整版] 链接:https://pan.baidu.com/s/1cwPDVkj_I5z568mYIHni4A 提取码:24g2 2020 ...
前端面试题大全持续更新中……
目录 1.nextTick知道嘛,实现原理是什么? 2.检测数据类型的方法 3.vue切换路由不重新渲染_Vue路由切换时页面内容没有重新加载 4.JavaScript开发中的23种设计模式详解 5. ...
web前端面试题（持续更新）
此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...
2023高频前端面试题（持续更新含答案）
1,es6有哪些新特性? ES6是2015年推出的一个新的版本.这个版本相对于ES5的语法做了很多的优化 let和const具有块级作用域,不存在变量提升的问题.新增了箭头函数,简化了定义函数的写法, ...
2022最全前端面试题（持续更新）
css部分如何水平垂直居中一个盒子? 已知高度可以使用 line-height 等于高度实现垂直居中:使用 text-align:center实现水平居中 display:flex; align- ...
2022年最新前端面试题，持续更新
[js面试题] 1.js数据类型基本数据类型 Number.String.Boolean.Null.Undefined.Symbol.bigInt 引用数据类型 object.Array.Date. ...
Web前端面试题汇总(持续更新...)
H5 的新特性有哪些?C3 的新特性有哪些? H5 新特性拖拽释放(Drap and drop) API ondrop 自定义属性 data-id 语义化更好的内容标签(header,nav,foo ...
前端面试题(HTML) ----- 持续更新
1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 ,在ps以jpeg格式存储时,提供11级压缩级别 JPG(或是JPEG): 优点: 占内存小 ...
深拷贝和原型原型链和web api 和 this指向等(中初级前端面事题)持续更新中，建议收藏
深拷贝值类型的赋值就是深拷贝:变量赋值时,拷贝的不是内存地址,而是将数据完整的在内存中复制了一份 const a = 10const b = aconsole.log(b); 浅拷贝引用类型(nu ...

2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer

一、前端基础

（一）HTTP/HTML/浏览器

1、说一下 http 和 https

2、tcp 三次握手，一句话概括

3、TCP 和 UDP 的区别

（二）CSS

1、说一下 css 盒模型

2、画一条 0.5px 的边框线

3、link 标签和 import 标签的区别

4、transition 和 animation 的区别

5、Flex 布局

6、BFC（块级格式化上下文，用于清除浮动，防止 margin 重叠等）

7、垂直居中的方法

8、关于 JS 动画和 css3 动画的差异性

9、块元素和行元素

10、多行元素的文本省略号

11、visibility=hidden, opacity=0，display:none的区别

12、双边距重叠问题（外边距折叠）

13、position 属性 比较

14、浮动清除

15、css3 新特性

16、CSS 选择器有哪些，优先级呢

17、怎么样让一个元素消失

18、css 动画如何实现

19、CSS3 中对溢出的处理

20、float 的元素，display 是什么

21、隐藏页面中某个元素的方法

（三） JavaScript基础

1、get和post的区别主要有以下几方面：

2、补充 get 和 post 请求在缓存方面的区别

3、说一下闭包

4、说一下类的创建和继承

5、如何解决异步回调地狱

6、说说前端中的事件流

7、如何让事件先冒泡后捕获

8、说一下事件委托

9、说一下图片的懒加载和预加载

10、mouseover 和 mouseenter 的区别

11、JS 的 new 操作符做了哪些事情

12、改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

13、JS 的各种位置，比如 clientHeight,scrollHeight,offsetHeight ,以及 scrollTop, offsetTop,clientTop 的区别？

14、JS 拖拽功能的实现

15、异步加载 JS 的方法

16、Ajax 解决浏览器缓存问题

17、实现 AJAX 的基本步骤

18、JS 的节流和防抖

19、JS 中的垃圾回收机制

20、eval 是做什么的

21、如何理解前端模块化

22、说一下 CommonJS、AMD 和 CMD

2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer相关推荐

最新文章

热门文章

13、position 属性比较