不断面试不断总结，持续更新中~
Css：
1.Css盒子模型有哪些，box-sizing有哪些应用
盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。
<!DOCTYPE HTML>
几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。
盒子代码： box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
也就是盒子宽高 = 内容区域的宽高+padding+border;
2.水平居中？垂直居中？水平垂直居中？各有哪些方法
1.通过margin: 0 auto; text-align: center实现CSS水平居中。
2.通过display:flex实现CSS水平居中。
随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3.通过display:inline-block和text-align:center实现CSS水平居中。
display:inline-block能改父元素内的子元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使用。
4.通过display:table-cell和margin-left实现CSS水平居中。
对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
5.通过position:absolute实现CSS水平居中。
这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。
使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。
3.position 的嵌套
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思 的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其 Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是 说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持
position:absolute;
这个顾名思义是绝对布局，在元素中设置之后，该元素会脱离文档流，它并不是像楼下说的相对于浏览器进行定位，而是一层一层向上寻找父元素，直到寻找到第一个position不为static的祖先元素，它相对于这个祖先元素进行定位。所以当你的父元素position:relative时，该子元素是相对于你的父元素进行定位。如果任何一个祖先元素都没有设置position:relative，寻找到最外层的顶级元素html后自然不会继续寻找，所以这时才是相对于浏览器进行定位。
4.清除浮动有哪几种方法？
推荐的：
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}
overflow:hidden
5.两个元素如何平行对齐？哪几种方法
display:inline-block
6.margin为负
Js：
1.基本数据类型
2.this默认的指向？在方法中嵌套方法，如何留住this？
1.window
2.var obj = {
val : 1,
outShow : function(){
var innerFunc = function(){ alert(this.val);};
innerFunc.bind(this)(); //弹出1
innerFunc.call(this); //弹出1
innerFunc.apply(this); //弹出1
}
};
3.Promise的用法
4.如何实现继承，有哪几种方法
1、原型链继承
核心： 将父类的实例作为子类的原型
2、构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
3、实例继承
核心：为父类实例添加新特性，作为子类实例返回
4、拷贝继承
5、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;6、寄生组合继承
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } (function(){ // 创建一个没有实例方法的类 var Super = function(){}; Super.prototype = Animal.prototype; //将实例作为子类的原型Cat.prototype = new Super();Cat.prototype.constructor = Cat
5.Ajax如何实现？
1.使用原生JavaScript实现
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("microsoft.XMLHTTP");
}
xhr.open('GET','action',true);
xhr.onreadystatechange = function(){
if (xhr.readyState== 4 && xhr.status==200) {
alert(responseText);
}
}
xhr.send(null);2.使用jquery：
$("#username").bind("blur",function(){
var $this = $(this);
$.ajax({
url:"user_validateUsername?username=" + $("#username").val(),
dataType:"text",
success:function(data){
$("#username-error").text("用户名可用");
}
})
});3.使用Jquery的form表单验证框架
需要引入jquery.form.js及以来的jquery类库
//提交表单时使用ajax校验用户名
var options = {
url:"user_validateUsername?username=" + $("#username").val(),
target:"#username-error"
};
$("#form").ajaxForm(options);4.使用Jquery的Validation框架
引入jquery.validate.js和messages_zh.js(optional)及jquery类库
$("#registerForm").validate({
debug:true,
rules:{
username:{
//使用remote进行单个元素的ajax验证
remote:{
url:"user_validateUsername.action",
type:"post",
dataType:"text",
data:{
username: function(){
return $("#username").val();
}
},
dataFilter:function(data,type){
if(data == "true"){
return true;
}else{
return false;
}
}
}
}
}6.Js的垃圾回收
现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。
标记清除：
工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。
工作流程：
1. 垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。
2. 去掉环境中的变量以及被环境中的变量引用的变量的标记。
3. 再被加上标记的会被视为准备删除的变量。
4. 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。
引用计数：
工作原理：跟踪记录每个值被引用的次数。
工作流程：
1. 声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。
2. 同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.
3. 当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.
4. 当引用次数变成0时，说明没办法访问这个值了。
5. 当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。
7.什么情况会引起内存泄漏？
虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。
1. 意外的全局变量引起的内存泄漏。
原因：全局变量，不会被回收。
解决：使用严格模式避免。
2. 闭包引起的内存泄漏
原因：闭包可以维持函数内局部变量，使其得不到释放。
解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。
3. 没有清理的DOM元素引用
原因：虽然别的地方删除了，但是对象中还存在对dom的引用
解决：手动删除。
4. 被遗忘的定时器或者回调
原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。
解决：手动删除定时器和dom。
5. 子元素存在引用引起的内存泄漏
原因：div中的ul li 得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。
解决：手动删除清空。
三大框架必须掌握一种~