前端面试题总结

2019Web前端开发面试题总结

1. 弹性布局
flex布局是css3中新增的一种布局方式。

/*元素排列方式*/
flex-direction：
/* */
/* 超出行是否换行 nowrap不换行 */
flex-wrap：
/*水平对齐方式 */
justify-content
/*垂直对齐方式 */
align-items
/*实现水平居中对齐： */
display：flex
justify-content：center
align-items：center

2. 块级元素水平垂直居中方法
1)已知块级元素的宽和高，使用绝对定位absolute和外边距实现水平垂直居中。

/*//父元素*/
position: relative; 
/*//子元素 */
position: absolute; 
left: 50%;
top: 50%;
margin-left: -(width/2)px;
margin-top: -(height/2)px;

2)使用css3 display:flex（IE存在兼容性问题）

/*父元素*/
display: flex;
/*子元素*/ 
margin: auto;
/*或者直接给父元素设置*/
display: flex;
justify-content: center;
align-items: center;

3)使用绝对定位+CSS3 transform（由于transform中translate偏移的百分比都是相对于自身而言的，所以不必知道子元素的宽高，但是对于IE只有IE9+才支持）

/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4)已知子元素的宽和高，设置其样式属性

/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

3.CSS3盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

（1）W3C的标准盒模型
（2）IE传统下盒模型

浏览器把每个元素看作一个盒子模型，每一个盒子模型是由以下属性组合所决定的：display、position、float、width、height、margin、padding和border等。不同类型的盒模型会产生不同的布局。

4. 页面导入样式时，使用link和@import有什么区别?

• 本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
• 加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
• 使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

5. JS数据类型：
基本数据：number，string，boolean，null，undefined，symbol（ES6新增，表示独一无二的值。）
引用数据：object（数组，函数，对象的数据类型均为对象）
6. 立即执行函数
顾名思义，也就是说这个函数是立即执行函数体的，不需要你额外去主动的去调用，立即执行函数可以在函数创建后立即执行。立即执行函数的两种常见形式：

(function(){…})() 
(function(){…}())

注意：

• 函数体后面要有小括号（）。
• 函数体必须是函数表达式而不能是函数声明。
• 函数外面的括号是为了在执行JS代码时把函数体当作一个表达式来执行，而不是函数声明。
• 一般都是匿名函数，这样不必为函数命名，避免污染全局变量。
• 函数内部形成了一个封闭的作用域，可以封装一些外部无法读取的私有变量。

7.闭包
什么是闭包？
闭包指的是：能够访问另一个函数作用域的变量的函数；
简单来说：闭包就是一个函数，这个能够访问其他函数作用域中的变量；

function test(){
   var a=1;
   return function(){
  	alert(a);
   }
 }
 var try=test();
 try();   //弹出a的值

这个例子中，变量a在test方法外部是无法访问的，但test方法里面，嵌套了一个匿名函数，通过return返回，test作用域中的变量a，可以在匿名函数中访问。并且当test方法执行后，变量a所占内存并不会释放，以达到嵌套的函数还可以访问的目的。

• 闭包的作用在于，可以通过闭包，设计私有变量及方法。
• 由于闭包会携带包含它的函数的作用域，因为会比其他函数占用更多内容，过度使用闭包，会导致内存占用过多。