前端面试总结——函括80%常见题目（下）

一、 引言

配合前面的面试总结一起观看更佳，传送门：前端面试总结——函括80%常见题目（上）

二、CSS部分

(1)什么是盒子模型？

盒子模型分为两种：IE盒子和W3C盒子。

• W3C盒子包含了Content部分、padding部分、border部分、margin部分；
• IE盒子则是把content、padding、border统一为Content部分。

(2)什么是BFC，它有什么作用？

BFC全称块级格式化上下文，它相当于页面上一个渲染区域，他规定了内部元素如何定位以及外部元素与该区域的相互作用关系。

它主要有以下特征：

• a、内部浮动闭合；
• b、不受外部浮动覆盖；
• c、内部相邻子元素的垂直方向margin有重叠

(3)如何创建BFC？

• a、根元素；
• b、浮动；
• c、绝对定位；
• d、display为table-cell、table-caption、inline-block中任意一个

(4)如何清除浮动？

• a、给父级添加overflow:hidden 清除浮动方法；
• b、万能清除法 after伪类 清浮动（现在主流方法，推荐使用）：

.float_div:after{
			content:".";
			clear:both;
			display:block;
			height:0;
			overflow:hidden;
			visibility:hidden;
		}
		.float_div{
			zoom:1
		}

(5)CSS选择器权重规则是什么？

• a、!important的权重最高；
• b、内联的style设置样式权重比例+1000；
• c、id选择器+100；
• d、类选择器+10;
• e、标签选择器+1

(6)CSS3新特性有哪些？

• a、新增了选择器；
• b、新增了阴影功能；
• c、新增了线性渐变;
• d、新增了旋转;
• e、新增了圆角

(7)CSS3动画（简单动画的实现，如旋转等）

• a、依靠CSS3中提出的三个属性：transition、transform、animation
• b、transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• c、transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• d、animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括：
  • animation-name 动画名称
  • animation-duration、动画时长
  • animation-timing-function、 动画过度类型
  • animation-delay、 动画延迟
  • animation-iteration-count、 动画次数
  • animation-direction 动画方向

(8)如何进行响应式样式编写？

@media screen and (max-width:960px){
			.logo{
				color:red
			}
		}

当设备屏幕尺寸小于960px时，执行以上样式

二、JS部分

(1)什么是闭包？

利用函数嵌套的办法，把内部变量返回到外部作用域中供外部访问。本质上是利用函数来保存变量。

(2)什么是作用域链？

作用域是规定当前函数或变量可以访问的范围，而作用域当中规定只有内部能访问外部，而外部无法访问内部，从内部沿着外部一层层的作用域进行访问的链式范围叫作用域链

(3)什么是原型?什么是原型链？

• a、每个对象都会在其内部初始化一个属性，就是prototype(原型)
• b、当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念；

(4)JS的DOM事件模型是什么？

事件捕获–事件目标触发事件–事件冒泡

(5)什么是DOM事件流？

当一个元素触发事件时，该事件从根节点开始通过捕获到达目标节点，然后再通过冒泡传递到window对象的过程，成为DOM事件流

(6)如何阻止冒泡和默认行为？

//阻止冒泡：
			//W3C中：
				e.stopPropagation()
			//IE：
				cancelBubble = true
			
//阻止默认行为：
			//W3C:
				e.preventDefault()
			//IE:
				window.event.returnValue = false

(7)this对象有什么特点？

this始终指向它的直接调用者，如果有new关键字，则指向new出来的那个对象，另外，在setTimeout等异步事件中，始终指向全局window对象

(8)new构造函数的过程中发生了什么？

• a、生成一个空对象；
• b、将空对象的_proto_指向构造函数的prototype；
• c、执行构造函数，并且this上下文指向该空对象；
• d、如果构造函数返回了一个对象，那么就放弃空对象，否则，就返回前面创建的空对象

(9)call()和apply()的区别？

两者都是用于类的继承，第一个参数都是传入this的指向对象，关键在于后面的参数：

• apply：接收一个数组或类数组；
• call：传入单个参数，并且这些参数会依次传入父类中执行

(10)Ajax的原理是什么？

原理简单来说，就是在用户和服务器之间架设了一个中间层（ajax引擎），通过XMLHttpRequest对象，向服务器异步发送请求，从服务器中获取数据，然后利用JS操作DOM完成页面操作。
原生AJax：

var xhr = new XMLHttpRequest();
		xhr.open('get',url,true);
		xhr.send(null);
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){
				if(xhr.statu == 200){
					console.log(''成功)
					}eles{
					console.log('失败')
					}
				}
			}
			

(11)Ajax中的状态值(readyState)含义：

• 0 - (未初始化)还没有调用send()方法;
• 1 - (载入)已调用send()方法，正在发送请求;
• 2 - (载入完成)send()方法执行完成;
• 3 - (交互)正在解析响应内容;
• 4 - (完成)响应内容解析完成，可以在客户端调用了

(12)常用的字符串和数组操作方法有哪些？

数组：

			arr.length //获取数组长度
			arr.push(x1,x2,...) //将参数添加到arr数组尾部，返回它更新后的长度
			arr.unshift(x1,x2...) //与上面作用一样，但添加的位置是arr数组头部
			arr.pop() //删除数组中最后一个元素
			arr.shift() //删除数组中第一个元素
			arr.join('x') //以参数作为分隔符，把数组中的各项连接起来变成字符串返回
			arr.sort() //对数组内元素排序，一般需要传入一个函数如升序：function(a,b){return a-b}
			arr.concat(arr2,arr3) //把多个数组合并
			arr.slice(start,end) //从start索引到end之间的范围内所有元素截取出来
			arr.splice(index,count) //从index处删除count个元素，如果在count之后继续传参，那么将在删除后把这些参数插入到数组中
			arr.indexOf(value,index) //从index开始搜索有没有vaule，存在则返回，没有则返回-1。其中index非必要传递

字符串：

			str.charAt(index) //返回在字符串中index索引代表的字符
			str.charCode(index) //返回指定字符的编码
			str.substring()\str.slice() //用法和作用跟数组一样
			str.substr(start,len) //从start位置开始截取len长度的字符串
			str.split('-') //把一个字符串分割成字符串数组，参数是该字符串中存在的某字符，以此为分割
			str.replace()//将字符串中的一些字符用另一些字符替换