2019前端面试题

CSS

1. BFC

 **描述**：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
 ***BFC的布局规则***
内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

***如何创建BFC***
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

2. 清除浮动

	方式一:使用overflow属性来清除浮动

		.ovh{
　　　　　　overflow:hidden;
　　　　　}

	注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

方式二:使用额外标签法

		.clear{
　　　　　　clear:both;
　　　　　}

　　　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
　　　　　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
　　　　　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
　　　　注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

方法三:使用伪元素来清除浮动(after意思:后来,以后)

.clearfix:after{
　　　　　　content:"";//设置内容为空
　　　　　　height:0;//高度为0
　　　　　　line-height:0;//行高为0
　　　　　　display:block;//将文本转为块级元素
　　　　　　visibility:hidden;//将元素隐藏
　　　　　　clear:both//清除浮动
　　　　　}
　　　　.clearfix{
　　　　　　zoom:1;为了兼容IE
　　　　}

方法四:使用双伪元素清除浮动

　　　.clearfix:before,.clearfix:after {
		  content: "";
		  display: block;
		  clear: both;
		}
	.clearfix {
	      zoom: 1;
	}
 

	总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨!

3. 居中问题

	1.通过margin: 0 auto; text-align: center实现CSS水平居中。
	2.通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
	这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
	3.通过display:table-cell和margin-left实现CSS水平居中。
	对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
	使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
	4.通过position:absolute实现CSS水平居中。
	这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。
	使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。
	5.通过width:fit-content实现CSS水平居中。
	这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。
	需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。

6. 选择器
7. 1px解决方案
   元素本身不定义边框，伪元素定义1px边框，并且根据根据像素比值设置缩放比例，像素比为3时设置为 0.33，像素比为2时设置0.5。

	HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
	position: relative;
}
.border-1px:after {
	position: absolute;
	content: "";
	top: -50%;
	bottom: -50%;
	left: -50%;
	right: -50%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
	border-1px::after {
		-webkit-transform: scaleY(0.33333333);
		transform: scaleY(0.33333333);
	}
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
	border-1px::after {
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
}

8. 移动端适配
   1.适配不同屏幕宽度以及不同dpr，通过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示；
   2.若无需适配可显示1px线条，也可以不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口；
   当视口缩放，计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 因此不必担心rem的计算；
   3.!!css单位：以前我认为这样比较好：适配元素rem为单位，正文字体及边距宜用px为单位；现在认为全部用rem即可，包括字体大小，不用px；
   4.px为单位的元素，需根据dpr有不同的大小，如大小12px, dpr=2则采用24px, 使用sass mixin简化写法；
   配合scss函数，简化px2rem转换，且易于维护(若需修改$base-font-size, 无需手动重新计算所有rem单位)；
   5.px2rem函数的base-font-size=32px，参数传值直接为设计图标注尺寸；
   6.使用iPhone6(375pt)二倍设计图:宽度750px；
   7.切图使用三倍精度图，以适应三倍屏（这个目前我还没有实际应用过）

   作者：puxiaotaoc
   链接：https://www.jianshu.com/p/b13d811a6a76
   来源：简书
   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

JS

7. 手动实现一个原生的ajax请求
8. http缓存
9. header 头部内容
10. cookie，localstorage和sessionstroage
11. vue双向数据绑定
    https://www.cnblogs.com/zhuzhenwei918/p/7309604.html
12. 跨域
13. 类数组转化成数组
14. 防抖与截流
15. 事件冒泡，事件委托
16. 一个数组里N个数的和为sum
17. 高阶函数
18. prototype实现继承
    https://blog.csdn.net/chi1130/article/details/95201991?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
19. property和attribute区别
    https://www.cnblogs.com/lmjZone/p/8760232.html添加链接描述
20. 标准模式和混杂模式区别
21. 会话cookie与持久cookie
22. vue 组件传值
23. vue 自定义组件
24. vueX
25. 浏览器兼容性举例
26. 算法题2:实现一个函数，接收三个参数，请求的urls，最大请求数max，回调函数cb，所有请求结束后调用cb，且并发请求数不超过max
27. 一面主要是 常用函数实现bind，new，Object.create；跨域问题，xsrf防范等
28. Promise实现原理里面的链式调用
29. 给一颗二叉树和一个值，检查二叉树中是否存在一条路径，这条路径上所有的节点值加起来等于给的那个初始值。例如下面的二叉树，如果初始值22，那么存在一条路径5->4-11->2请实现如下函数
    function hasPathSum(root,sum){}
    
    25.可以批量请求数据所有的URL地址在erls参数中，同时可以通过max参数控制请求的并发度，当所有请求结束之后，需要执行callback回掉函数。发请求的函数可以直接使用fetch即可
    function sendRequert(urls:string[],max:number,callback:()=>void){}

26.排序去重
27.new,return关键字
28.http缓存
29.vue solt ,key ,routing,深度监听
30.xss攻击
31.git相关指令
32.node相关指令
33.mongDB相关指令
34.map，set对象
35.map(),forEach()方法的区别
36.evebtBus缺点
37.