1.水平居中，垂直居中

CSS水平居中：
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中
行内元素：设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

2.html长度单位

rem

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

3.0.5px直线

画一条0.5px的直线？
height: 1px;

transform: scale(0.5);

4.label标签

标签

方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

5.遍历A节点的父节点下的所有子节点

var b=document.getElementById("a").parentNode.children;
console.log(b)

6.js递归的方式写1到100求和

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }

var sum =add(1,2); 

7.get、post的区别

1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内

2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

3.get后退不会有影响，post后退会重新进行提交

4.get请求可以被缓存，post不可以被缓存

5.get请求只URL编码，post支持多种编码方式

6.get请求的记录会留在历史记录中，post请求不会留在历史记录

7.get只支持ASCII字符，post没有字符类型限制

8.http的响应码

200 OK 正常返回信息

400 Bad Request 服务器无法理解请求的格式

403 Forbidden 禁止访问

404 Not Found 找不到与 URI 相匹配的资源

500 Internal Server Error 最常见的服务器端错误。

9.会话cookie,持久cookie?

cookie是服务器返回的，指定了expire time（有效期）的是持久cookie,没有指定的是会话cookie

10.export和export default的区别？

使用上的不同

export default xxx
import xxx from ‘./‘

export xxx

import {xxx} from ‘./‘

11.继承的几种方式及优缺点

借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上原型继承，将子对象的prototype指向父对象的一个实例组合继承

原型链继承的缺点

字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

12.target、currentTarget的区别？

currentTarget当前所绑定事件的元素

target当前被点击的元素

13.数组去重

//es6方法数组去重
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from()能把set结构转换为数组
}

//最简单
function unique1(array){
    var n = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){ //遍历当前数组
        if (n.indexOf(array[i]) == -1)
            n.push(array[i]);
    }
    return n;
}

// 速度最快， 占空间最多（空间换时间）
function unique2(array){
    var n = {}, r = [], type;
    for (var i = 0; i < array.length; i++) {
        type = typeof array[i];
        if (!n[array[i]]) {
            n[array[i]] = [type];
            r.push(array[i]);
        } else if (n[array[i]].indexOf(type) < 0) {
            n[array[i]].push(type);
            r.push(array[i]);
        }
    }
    return r;
}

//数组下标判断法
function unique3(array){
    var n = [array[0]]; //结果数组
    for(var i = 1; i < array.length; i++) { //从第二项开始遍历
        if (array.indexOf(array[i]) == i) 
            n.push(array[i]);
    }
    return n;
}

14.块级元素，行内元素，行块元素

block、inline和inline-block
block：p、h、ul、ol、div

inline：a、span、label
inline-block：img、input

block：独占一行；宽高padding、margin可设置；自动换行；多个块状元素默认从上到下排列
inline：不独占一行；宽高不能设置；左右margin、padding有效，上下无效；不自动换行

块级元素可以包含内联元素和块级元素(P标签不能包含P标签)。但内联元素不能包含块级元素。

使用display属性可以对其进行切换

15.画一个三角形

#div{
    width:0;
    height:0;
    border-width:20px 20px 0 20px;
    border-color:black transparent transparent transparent;
    border-style:solid;

}

16.阻止冒泡,阻止默认行为

阻止冒泡：
e.stopPropagation();
e.cancelBubble=true;
阻止默认行为

e.preventDefault()

17.闭包

“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量

闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包是 javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。

function f(){
    let a = 0;
    function f2(){
        alert(++a);
    }
    return f2;
}

let b = f();//变量b实际上是指向了函数f2
b();
//当函数f的内部函数f2被函数f外的一个变量引用的时候，就创建了一个闭包。

function Counter(start){
    let count = start;
    return {
        increment:function(){
            count++;
        },
        get:function(){
            return count;
        }
    }
}

let fun = Counter(20);
fun.increment();
fun.increment();
let res = fun.get();
console.log(res);

18.Object.is()、三等号 与 双等号？

相同点：都是判定两个值是否相等

两等号判等，会在比较时进行类型转换

三等号判等(判断严格)，比较时不进行隐式类型转换,（类型不同则会返回false）

Object.is 在三等号判等的基础上特别处理了 NaN 、-0 和 +0 ，保证 -0 和 +0 不再相同， 但 Object.is(NaN, NaN) 会返回 true. Object.is 应被认为有其特殊的用途，而不能用它认为它比其它的相等对比更宽松或严格。

19.行高

行高>字号:文字在自己所在行中垂直居中
行高<字号:文字互相遮盖
行高=容器高度:文字垂直居中

20.盒子模型

1. 有两种， IE 盒子模型、W3C 盒子模型；
2. 盒子模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
3. 区 别： IE的content部分把 border 和 padding计算了进去;

怪异盒子模型、IE 盒子模型：

height=content的height+paddin-top+padding-bottom+border-top+border-bottom;

width=content的width+paddin-left+padding-right+border-left+border-right;

21.h1标签和title标签

• h1标签：写在文章正文的标题部分，是展示给用户看的。
• title标签：写在网页的head部分，是展示给搜索引擎看的，搜索引擎的搜索结果中展示的标题就是这个title标签里的内容

22.b与strong的区别、i与em的区别？

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而b是展示强调内容。

i内容展示为斜体，em表示强调的文本；

Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

23.CSS选择器

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li） 只用于选择指定标签元素的第一代子元素
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a:hover, li:nth-child）

24.CSS继承

• 可继承的样式： font-size font-family color, UL LI DL DD DT;
• 不可继承的样式：border padding margin width height ;

25.CSS优先级

• 属性后插有 !important 的属性拥有最高优先级。
• 就近原则：距离最近的样式有效。(多标签嵌套看离内容最近的标签的样式)
• 顺序原则：最后书写(不是调用)的样式有效。(同一标签、同一属性，多次修改，看最后的样式)
• 精细原则：或者叫特殊原则。即选择器的指向越精细越优先。

26.display

block 像块类型元素一样显示。
none 此元素不会被显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

27. position

• static 静态定位：默认，完全遵循文档流定位
• relative 相对定位：参照自己产生位移，不脱离文档流
• absolute 绝对定位：以有定位(position不是static)的父元素为基准，由宽高、上下左右的值确定位置，脱离文档流，会出现相互遮掩(参照html而不是body，因为body有8px的margin)
• fixed 固定定位：参照浏览器窗口定位，脱离文档流，浏览器滚动不会产生影响，由宽高、上下左右的值确定位置
• inherit 规定从父元素继承 position 属性的值。

另：

• top,bottom,left,right的值对static无影响，对另外三个有影响
• z-index：决定相互遮掩的关系，值高覆盖值低(除static外的三个)

28.CSS3有哪些新特性

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
  多列布局 （multi-column layout）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow、）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画，多背景 transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

29.call apply bind

call、apply和bind函数都是Function类的函数，他的作用是可以改变函数调用的this指向，以实现将原本调用方法的对象替换成另外一个对象；

1. call和apply的区别是在给被调用函数的传参的参数形式

   • call函数：传递参数列表 call(thisParam, arg1, arg2, ……)
   • apply函数：将所有参数组成一个数组 apply (thisParam, argArray)

2. apply和bind的区别：

   • apply立刻调用了函数，其返回的是函数执行后的返回值

   • bind的返回值为替换了this后的函数并不会立刻调用，这样就可以重复使用这个函数了

3. apply与Math.max()

   //apply与Math.max()搭配得到数组最大值
   let arr = [2,4,6,7,10,-100]
   let max = Math.max.apply(null,arr);
   console.log("最大值为："+max)
   

30.ES6十大特性

1.默认参数

定义函数形参时：参数名=默认值

function add(num1=2,num2=20){
console.log(num1+num2);
}
add();

2.多行字符串

使用反引号` 包含，字符内容可以是多行的

3.模板文本

多行字符串中可以使用占位符解决无恼人的字符串拼接噩梦
占位符${...} 要使用在多行字符串中

4.解构

ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1. 数组解构：

   let arr = new Array(-100,-200,"red");
   let [num1,num2] = arr;
   console.log(num1);
   console.log(num2);
   

2. 对象解构：

   //同名变量的对象解构
   let person = {
       name:"zs",
       age:18
   }
   let {name,age} = person;
   console.log(name);//zs
   console.log(age);//18
   
   //不同名变量的对象解构
   let teacher = {
       age:30,
       className:"数学"
   }
   let {age:tAge,className:tClassName}=teacher;
   console.log(tAge);//30
   console.log(tClassName);//数学
   

3. 解构应用

   let x = 111;
   let y = 222;
   [x,y] = [y,x];
   console.log(x);//222
   console.log(y);//111
   
   function fun(){
   return{
   res1:‘aaa‘,
   res2:‘bbb‘
   }
   }
   let {res1:str1,res2:str2} = fun();
   console.log(str1);//aaa
   console.log(str2);//bbb
   

5. 增强的对象文本

let obj = { 
　　x, //相当于x:x,
　　y:200
};

let obj = {
    fun(){...}
    //fun:function(){...}
}

//ES5如果给一个对象赋值相同的属性，会报错。ES6会取最后一个相同属性的值。
let obj = {
    name: ‘Sam‘,
    name: ‘Jason‘
};
console.log(obj.name) // ‘jason‘

//计算属性名
let object = {
　　["first" + "Name"]: "Eden",
};
console.log(object["first" + "Name"]); // "Eden"

6.箭头函数

箭头函数区与匿名函数的主要区别在于，箭头函数没有‘this’，箭头函数中的‘this’是其父函数的

let getTemp = function(id){
    return{
        id,
        name:"temp"
    }
}
let stu1 = getTemp(123);
console.log(stu1.name);//temp
console.log(stu1.id);//123

let getTemp2 = id=>({id,name:"temp2"});
let stu2 = getTemp2(321);
console.log(stu2.name);//temp2
console.log(stu2.id);//321

7.Promise

处理层层嵌套的函数回调时,会深陷回调地狱，Promise就可以将异步操作以同步操作的流程表达出来，控制异步操作更加容易。

1. Promise有3种状态
   • Pending：进行中
   • Resolved(Fulfilled)：已完成
   • Rejected：已失败
2. Promise状态的改变
   • Pending --> Resolved
   • Pending --> Rejected
3. Promise.all() 和 Promise.race()
   all()：接收一个Promise对象的数组作为参数。
   当这个数组里的所有Promise对象全部变为resolve的时候，该方法才resolve。如果其中一个Promise对象为reject的话，则该方法为reject。
   race()：接收一个Promise对象数组为参数。只要其中一个Promise对象变为Resolved或者Rejected状态，该方法返回，进行后面的处理。
4. then() 和 catch()
5. 总结Promise的优缺点：
   有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
   Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

8.块级变量let和const

1. ES6中使用”let”关键字声明变量：

   • let声明的变量不会被提升

   • 在同一作用域下，let不能重复声明变量，且必须在使用前进行声明

   • 在嵌套作用域下，let声明一个同名新变量，不会抛出错误

   • let定义的全局变量不再是window对象的属性

   • let定义的变量解决了暂时性死区问题

2. ES6中使用“const”关键字声明常量：

   • const声明在同一作用域中定义一个已有变量时会出错
   • 在嵌套作用域下，const声明一个同名新变量，不会抛出错误
   • 常量一旦被赋值，就不可以再改变（类似其他语言常量）无论是否采用严格模式
   • const声明一个对象时，但是其属性值可以被更改
   • 常量是块级的，意味着在声明它的语句块之外无法访问

9. class

ES6中增加了class关键字，让类的定义更加便捷；不过这只是一个语法糖而已并不是新的数据结构

• ES6使用class定义类有别于ES5伪类结构的特点
  • 类的声明不会被提升，这与函数定义不同；类声明的行为与“let”相似，在程序执行到到达声明处之前，类会存在暂时性死区
  • 类声明中的所有代码会自动运行在严格模式下，且无法退出严格模式
  • 类的所有方法都是不可枚举的，这是对于伪类结构的显著变化；仿类结构必须使用Object.defineProperty()才能将方法变为可枚举
  • 类的所有方法内部都没有[[Construct]]，因此使用new来调用他们会抛出错误
  • 调用类的构造器时不使用new，会抛出错误；使用call函数也不能伪造

10.模块

1. 为什么使用模块，模块化的主要优点是
   • 可以解决命名冲突
   • 管理依赖
   • 提高代码的可读性
   • 代码解耦，提高代码的复用性
2. 模块的实现方式
   • IIFE：模块化的雏形。
   • AMD (异步模块依赖)：是 RequireJS 在推广过程中对模块定义的规范化产出，用于浏览器端。
   • CommonJS：在服务器端模块的规范，是同步加载的。被应用在node.js
   • ES6 Modules（模块），已经被node.js所支持

js去除字符串空格

事件代理

es6

盒子模型

数组定义

遍历数组

压入弹出

前端复习

原文：https://www.cnblogs.com/fork-ice/p/14423896.html