2020.7.16.h5面试记录

1.W3C标准盒模型和IE盒模型的区别？有了解过box-sizing吗，说说具体属性及用法
（1）w3c标准盒模型:

• w3c标准盒模型的范围包括margin、border、padding、content，盒模型的content部分不包含其他部分；
• 盒子的width、height只包括content的width、height，不包括padding和border

(2)IE盒模型：

• IE盒模型的范围包括margin、border、padding、content,盒模型的content部分包含了padding和border；
• IE盒模型的height、width不但包括content的height、width，还包括padding和border的宽度

（3）box-sizing
box-sizing属性允许你以某种方式定义某些元素，以适应指定区域；
属性明说：

• content-box:指定宽度和高度的行为，W3C盒模型方式被称为content-box。指定元素的宽度和高度适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外。
• border-box:指定宽度和高度确定元素边框，IE盒模型方式被称为border-box。也就是说，对元素指定宽度和高度包括了padding和border。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit:指定box-sizing属性的值，应该从父元素继承

2.常用的VUE组件
vue.js2.0组件：component
地址选择的三级联动组件等

3.VUE生命周期函数
vue生命周期函数
4.element ui中遇到的问题
我遇到的问题有：
- Form表单里面label和value混淆
- checkbox里面只能选两个，如果选了第三个、那么第一个选项自动反选,使用 :min 、:max去控制可选项目的限制
- 日期选择器部分边框不显示

5.实现一个js阶乘函数

	// for循环实现阶乘函数
			function fun(num) {
				var res = 1;
				for(var i=1;i<=num;i++){
					res *= i;
				}
				return res
			}
			console.log(fun(20))

6.js数组去重

var arr = [1,2,3,1,5,2]
//ES6 Set去重
function removeRepetition(array){
	return Array.from(new Set(array))
}
console.log(removeRepetition(arr))

//双重for循环去重
function removeRepetition(array){
	for(var i=0;i

6.js对象与json互转

• json obj 转 string
  JSON.stringify(data);
• string 转 json obj
  JSON.parse(data)

7.相对定位、绝对定位、固定定位的参照点

• relative：相对于自己的正常位置进行定位
• absolute：相对于static定位以外的最近的一个祖先元素定位
• fixed:相对于浏览器窗口进行定位

8.文本水平垂直居中

//第一种方法：既可以让文字水平垂直居中，也可以让图片水平垂直居中
div{
	text-align:center;
	vertical-align:middle
}

//第二种方法：使用line-height和text-align
div{
	text-align:center;
	width:100px;
	height:100px;
}
div p{
	margin:0;
	line-height:100px;
}

//第三种方法：flex布局
div{
	display:flex;
	justify-content:center;
	align-items:center;
}

9.元素水平垂直居中

//flex布局
div{
	display:flex;
	justify-content:center;
	align-items:center;
}

//absolute
div{
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	right:0;
	bottom:0
	margin-top:-100px;
	margin-left:-100px;
}

//在子元素上使用table-cell布局
div{
	display:table-cell;
	vertical-align:middle;
}


//transform,和定位比较接近
div{
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	right:0;
	bottom:0
	transform:translate(-50%,-50%)
}

10.居中剪裁img图片

img{
	width:100px;
	height:100px;
	object-fit:cover;
}

11.从输入URL到页面的渲染完成经历了什么过程（来源：ajjokerb博客）
1.浏览器地址栏输入URL
2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3.DNS解析URL对应的IP
4.根据IP建立TCP连接（三次握手）
5.发送http请求
6.服务器处理请求，浏览器接受HTTP响应
7.浏览器解析并渲染页面
8.关闭TCP连接