1. 知道属性选择器和伪类选择器的优先级吗？
CSS选择器的优先级顺序（由高到低）：
!important（优先级最高）
id 选择器
class选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
通配符选择器、关系选择器 （优先级最低）
2. inline-block、inline和block的区别
Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。
Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符
img既是行内元素 又是置换元素（Replaced element） 。 所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
因为img，input是可替换元素，css只能修改它们的位置，而不能改变它们的样式及其内容，他们的内容都不是通过在标签内添加文本，而是通过某个属性（比如src、data、label或js控制）来显示内容的，因此可以这样设置。
3. 用css实现一个硬币旋转的效果
transform-style: preserve-3d
4. 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，
引起重排重绘的原因有：
添加或者删除可见的DOM元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有：
不在布局信息改变时做DOM查询，
使用csstext,className一次性改变属性
使用fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
5. overflow的原理
当元素设置了overflow样式且值部位visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的
6. box-sizing的语法和基本用处
标准盒模型：width＝content
IE盒模型：width＝content＋padding＋border
标准盒子的宽度就可以表示为：width＋padding＋border＋margin
IE盒子的宽度可以表示为：width＋margin
当我们将值设置为content-box时，就表示将其看做标准盒子，设置的width变量的值自然就等于这个盒子的content的宽度，当我们将值修改为border-box时，也就视其为IE盒子，设置width的值等于三者宽度之和。
7. 两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的。
border 内边缘 或 padding 外边缘，与盒子类型无关
8. 相对布局和绝对布局，position:relative和obsolute。
relative是相对布局，是相对于static静态布局而言进行偏移操作
absolute是绝对布局一般是相对于其父级元素进行偏移
9. flex布局
flex 是 Flexible Box 的缩写，意为"弹性布局"。指定容器display: flex即可。
容器有以下属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
flex-direction属性决定主轴的方向；
flex-wrap属性定义，如果一条轴线排不下，如何换行；
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目（子元素）也有一些属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
10. block、inline、inline-block的区别。
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
11. css定位
固定定位fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。
相对定位relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位Static：
默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
inherit:
规定应该从父元素继承position 属性的值。
12. css预处理器有什么
less，sass等
scss教程
13. get请求传参长度的误区
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。
对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。
14. get和post请求在缓存方面的区别
get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。
15. 说一下闭包
一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
引用是其一，暴露，则是其二。这两点，缺一不可。
16. 说一下类的创建和继承
原型链继承
特点：基于原型链，既是父类的实例，也是子类的实例
缺点：无法实现多继承
构造继承
特点：可以实现多继承
缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
实例继承和拷贝继承
实例继承：为父类实例添加新特性，作为子类实例返回
拷贝继承：拷贝父类元素上的属性和方法
组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性
17. 如何解决异步回调地狱
promise、generator、async/await
18. 说说前端中的事件流
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
事件捕获阶段
处于目标阶段
事件冒泡阶段
addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡。
19. 说一下事件委托
事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
20. 说一下图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
21. mouseover和mouseenter的区别
22. js的new操作符做了哪些事情
new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。
23. 改变函数内部this指针的指向函数
当我们需要传递的参数不多时，可以选择call：
fun.call(thisObj, arg1, arg2);
当我们需要传递的参数比较多时，可以先将参数放至一个数组，然后选择apply：
args=[arg1,arg2,arg3...];
fun.apply(thisObj, args);
当我们想要生成一个新的函数长期绑定某个函数给某个对象使用，就可以选择bind：
var newFun = Fun.bind(thisObj);
newFun(arg1,arg2);
在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window
24. js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
clientHeight：表示的是可视区域的高度，不包含border和滚动条
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
25. js拖拽功能的实现
简单总结：
三个相关事件：mouseup、mousemove、mousedown
标识鼠标坐标：clientX、clientY
标识元素初始坐标：offsetX、offsetY
元素被拖拽位置：
鼠标移动时坐标－鼠标初始坐标＋元素初始坐标
26. 异步加载js的方法
异步加载的方法：
- defer：<script src＝"..." defer/>
添加defer属性后，对应的js脚本在所有元素加载完成后才会执行，且是按照js脚本声明的顺序执行的
- async：用法与defer相同，规定脚本一旦可用，就会异步执行，但只适用于外部引用的脚本，即有src属性，对应脚本为乱序执行，只要js脚本加载完成就会立即执行
27. Ajax解决浏览器缓存问题
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random()。
在URL后面加上时间搓："nowtime=" + new Date().getTime()。
28. js的节流和防抖
我的方法是：
根据时间戳
settimeout
29. JS中的垃圾回收机制
JS垃圾回收回收机制：
很简单，内存就那么多，用不到的变量，就清除掉，才能保证内存可以被循环利用
常用的两种方法：标记清除、引用计数
标记清除：
function test(){
var a = 10; //被标记"进入环境"
var b = "hello"; //被标记"进入环境"
}
test(); //执行完毕后之后，a和b又被标记"离开环境"，被回收
垃圾回收机制先给所有变量加上标记，然后去掉“环境中的变量”和“被环境中的变量引用的变量（闭包）”的标记，剩下的就是要删除的变量。
引用计数：
记录一个变量现在被引用次数，为0时就将其清除掉，不为0时就不清除，但常常会导致内存泄露（变量占用内存却没有使用，也没有被清除），举例：
let arr = [1,2,3,4];
console.log("hello world");
[1,2,3,4]占据着一块内存，它被arr引用，因此这块内存的引用次数为1。可是我们并没有使用arr，但这块内存却无法被释放，这就出现了内存泄漏的问题，因此我们需要使用arr＝null来将这块内存的引用次数变为0，才可以释放这块内存
30. eval是做什么的
它的功能是将对应的字符串解析成js并执行，应该避免使用js，因为非常消耗性能（2次，一次解析成js，一次执行）