总结网上流传讯飞前端实习面试题

We `

已于 2022-05-27 15:20:35 修改

阅读量280

点赞数 1

文章标签：前端 css css3

于 2022-03-01 17:28:18 首次发布

本文链接：https://blog.csdn.net/w1998725/article/details/123206135

版权

css部分

1、css垂直水平居中方案。

1、绝对定位 + margin: auto

<div class="dialog">
   <div class="text"></div>
</div>

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

2、第二种是已知宽度，margin 负值的方法

<div class="dialog">
   <div class="text"></div>
</div>

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -100px;
   margin-top: -100px;
}

3、 transform 属性（不用去知道已知元素的宽度了，直接用 transform 的 translate 来移动。）

<div class="dialog">
   <div class="text"></div>
</div>

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   position: relative;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

4、 flex 布局

<div class="dialog">
   <div class="text"></div>
</div>

.dialog{
   width: 500px;
   height: 500px;
   background-color: #cccccc;
   display: flex;
   justify-content: center;
   align-items: center;
}
.text{
   width: 200px;
   height: 200px;
   background-color: #e8491d;
}

5、内联文字的水平垂直居中：text-align: center

2、可继承属性。

css颜色，文字，字体间距、行高、对齐方式，和列表的样式可以继承
font-family、font-size、text-align、line-height等

3、display:none和visibility: hidden区别。

1、display:none 隐藏后的元素不占据任何空间，而 visibility:hidden 隐藏的元素空间依旧存在。

2、display:none 隐藏产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。

3、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

4、visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

4、css盒子模型

1、W3C盒子模型(标准盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型(怪异盒模型)
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin

box-sizing: content-box;//指定盒子模型为W3C（标准盒模型）
box-sizing: border-box;//IE盒子模型（怪异盒模型）。

5、行标签和块标签区别

行内标签也可叫行内元素、内联元素、内嵌元素

块级标签也可叫块级元素

块级标签
特点：独占一行，对高度、宽度、行高以及顶(margin-top)和底边距(margin-bottom)都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

<p>,<div>,<article>,<section>,<footer>

行内标签
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高(line-height)以及顶和底边距（可以设置左右margin，左右padding，不可以设置上下margin,上下padding），靠内容撑开宽高！

<span>,<a>

最好只设置宽高中其中一个，会进行等比例缩放；alt属性，如果图片找不到时，可显示alt属性的值）

行内块标签
特点：结合行内标签和块级标签的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示等；

<input>,<img>

js部分:

1、说说你对原型链，闭包的理解。

1.原型链：

理解：
　
　 js在创建对象（不论是普通对象还是函数对象）的时候，都有一个__proto__的内置属性，指向创建它的函数对象的原型。
　
　结论：
　
　　我们把这个由__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链。
　　另：每一个函数对象的原型对象还有一个constructor属性指向该函数对象本身。

2、基本类型有哪些，引用类型有哪些，区别是什么。

基本数据类型：number 、boolean、string、undefined、null、symbol
引用类型：Function、Array、Object。
typeof()这个三种类型得到的都是object

基本数据类型：变量名和值都储存在栈内存中

引用数据类型：变量名储存在栈内存中，值储存在堆内存中，但是堆内存中会提供一个引用地址指向堆内存中的值，而这个地址是储存在栈内存中的

3、说说深浅拷贝，浅拷贝有哪些方法。

深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
JSON.parse(JSON.stringify())、函数库lodash

浅拷贝：就是先设置一个新的对象,通过遍历的方式将旧对象的值一一赋值给新对象,新旧对象还是共享同一块内存
（…）扩展运算符、Object.assign()

4、说说继承方式及实现。

原型链继承

构造函数继承（借助 call）

组合继承

原型式继承

寄生式继承

寄生组合式继承

5、ES6了解哪些

ECMAScript 6 入门作者：阮一峰授权：署名-非商用许可证

6、js闭包和立即执行函数

闭包：

定义：内部函数被外部函数以外的变量引用时，就形成了一个闭包

我的理解是: 闭包就是能够读取其他函数内部变量的函数，由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。

所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

作用：1、累加器的应用。

缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

立即执行函数：

用function定义函数之后，立即调用该函数。这种函数就叫做立即执行函数

立即执行函数能配合闭包保存状态。

7、箭头函数和普通函数得区别

1、箭头函数都是匿名函数，普通函数可以有匿名函数，也可以有具体名函数
2、箭头函数不能用于构造函数，不能使用new，普通函数可以用于构造函数，以此创建对象实例

3、箭头函数中this的指向不同

在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

箭头函数本身不创建this，也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的
this供自己使用。

注意：this一旦被捕获，就不再发生变化

4.其他区别
（1）.箭头函数不能Generator函数，不能使用yeild关键字。
（2）.箭头函数不具有prototype原型对象。
（3）.箭头函数不具有super。
（4）.箭头函数不具有new.target。

总结：
(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()

(2).普通函数的this指向调用它的那个对象

Vue部分

1、v-if v-show区别

1.共同点

都是动态显示DOM元素

2.区别

（1) 方式

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）性能消耗： ’

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（3）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

2、Vue父子组件传值

1.父向子传值, 在子组件用props接收

2.子组件向父组件传值，在父组件内的引用子组件上绑定函数，子组件用this.$emit 触发这个函数，父组件内调用这个方法接收数据

3.父组件调用子组件的方法通过ref: 父组件：在子组件中加上ref即可通过this.$ refs.method调用

4.可以通过 $parent和 $children获取父子组件的参数

5.vue 全局事件(eventBus)

在main.js里：window.eventBus = new Vue();//注册全局事件对象

6.vuex

3、为啥要用axios，你说下用原生的ajax如何发送请求

Axios是一个基于Promise的 HTTP库，也是对原生XHR的封装，可以在浏览器和node.js 中使用

Ajax本身是针对MVC的编程,不符合现在前端MVVM的趋势。
AJAX使用

4、$route和 $router的区别

答：$ route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

算法部分

1、冒泡排序的过程

比如，我们要对64 34 25 72 22 11 60这个序列升序排序。

冒泡排序的思路是：将序列从左到右，每两个相邻的数都比较一次，如果前者大于后者，就交换这两个相邻数字的位置，这个过程重复多次，就可以将序列变成升序的。

网络部分

4、浏览器渲染过程

一般会经历以下几个过程：

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

其中，步骤2的具体过程是：

浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；

操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；

路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；

ISP缓存：若上述均失败，继续向ISP搜索。

We `

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
总结网上流传讯飞前端实习面试题

css部分1、css垂直水平居中方案。1、绝对定位 + margin: auto<div class="dialog"> <div class="text"></div></div>.dialog{ width: 500px; height: 500px; background-color: #cccccc; position: relative;}.text{ width: 200px; height
复制链接

扫一扫