前端面试题（持续更新）

HTML/CSS

1、什么是盒模型

	盒模型
		margin(外边距)- 清除边框外的区域，外边距是透明的。
		border(边框)- 围绕在内边距和内容外的边框。
		padding(内边距)- 清除内容周围的区域，内边距是透明的。
		content(内容)- 盒子的内容，显示文本和图像。

W3C的标准盒模型

在标准的盒子模型中，width指content部分的宽度
IE的盒模型


在IE盒子模型中，width表示content+padding+border这三个部分的宽度

css如何设置两种模型
这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

	行内元素有：a b span img input select strong
	块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
	空元素：<br> <hr> <img> <input> <link> <meta>
	行内元素不可以设置宽高，不独占一行
	块级元素可以设置宽高，独占一行

3.简述src和href的区别

	href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
	<link href="reset.css" rel=”stylesheet“/>
	浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
	
	src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、	iframe。例如
	<script src="script.js"></script>
	当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
	
	简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系

4、说说em/px/rem/vh/vw区别?

		px：绝对单位，页面按精确像素展示

		em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

		rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
		
		vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

5、css中，有哪些方式可以隐藏页面元素？区别?

		通过css实现隐藏元素方法有如下：
		display:none
		visibility:hidden
		opacity:0
		设置height、width模型属性为0
		position:absolute
		clip-path

区别：

图片:

6、谈谈你对BFC的理解？

（1）是什么

我们在页面布局的时候，经常出现以下情况：
这个元素高度怎么没了？
这两栏布局怎么没法自适应？
这两个元素的间距怎么有点奇怪的样子？
......
原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

（ 2）触发条件

触发BFC的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

（3）应用场景

防止margin重叠（塌陷）
清除内部浮动
自适应多栏布局

JS面试题

1、简述同步和异步的区别

		同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
		异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

2、说说JavaScript中的数据类型？存储上的差别？

在JavaScript中，我们可以分成两种类型：

基本类型 复杂类型

两种类型的区别是：存储位置不同

一、基本类型
基本类型主要为以下6种：

Number
String
Boolean
Undefined
null
symbol
二 、复杂类型统称为Object，我们这里主要讲述下面三种：

Object
Array
Function
基本数据类型存储在栈中
引用类型的对象存储于堆中

声明变量时不同的内存地址分配：
简单类型的值存放在栈中，在栈中存放的是对应的值
引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
不同的类型数据导致赋值变量时的不同：
简单类型赋值，是生成相同的值，两个对象对应不同的地址
复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

vue面试题

1、v-show与v-if的区别

控制手段不同
编译过程不同
编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

react面试题

1、

es6面试题

1、