Q 1.一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
div {
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}
Q 2 . 阐述清楚浮动的几种方式（常见问题）
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2.父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
3. 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
4.父级div定义 伪类:after
Q 3 . 解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片
Q 4 . 开发过程中遇到的内存泄露情况，如何解决的？
内存泄露的几种情况:
(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
btn.onclick = function(){
btn.onclick =null;
document.getElementById("myDiv").innerHTML ="Processing...";
}
(2)、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。
实例如下：
obj.onclick=function(){
//Even if it's a empty function }
obj=null;
Q 5 . javascript面向对象中继承实现？
面向对象的基本特征有：封闭、继承、多态。
在JavaScript中实现继承的方法：
1. 原型链（prototype chaining）
2. call()/apply()
3. 混合方式(prototype和call()/apply()结合)
4. 对象冒充
Q 6 .请描述一下 cookies sessionStorage和localstorage区别
相同点：都存储在客户端
不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
Q 7 . document.write和innerHTML的区别：
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
Q 8 . AJAX的四个步骤：
第一步，创建xmlhttprequest对象
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
Q 9 . xml和json的区别，请用四个词语来形容
· JSON相对于XML来讲，数据的体积小，传递的速度更快些
· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
·XML对数据描述性比较好；
· JSON的速度要远远快于XML
Q 10 . 三个盒子，左右定宽，中间自适应有几种方法
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>
<div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div>
</div>
Q 11 . js基本数据类型（简单数据类型）有哪些，
引用类型
五种基本类型: Undefined、Null、Boolean、Number和String。
引用类型 object、array、function
六种类型：Undefined、null、object、boolean、number、string
Q 12 . null 和 undefined
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
Q 14 . 什么是mvvm mvc是什么区别 原理
一、MVC（Model-View-Controller）
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
MVC使用非常广泛，比如JavaEE中的SSH框架
二、MVVM（Model-View-ViewModel）
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。
Q 15 . px和em的区别
px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
Q 16 . 优雅降级和渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容
Q 17 . JS哪些操作会造成内存泄露
1）意外的全局变量引起的内存泄露
2）闭包引起的内存泄露
3）没有清理的DOM元素引用
4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露
Q 18 .浏览器缓存有哪些，通常缓存有哪几种
http缓存、websql、cookie、localstorage、sessionstorage、flash缓存
19. css中的小知识点
（1）文本首行缩进：text-index
（2）水平对齐：margin: 0 auto; text-align: center
（3）多行文字垂直居中：
父：display：table
子：display：table-ceil；vertical-align：middle
（3）鼠标变小手：cursor：pointer
（4）li去点：list-style:none
（5）去下划线：text-decoration：none
（6）background-size：center---能看到图片中心，会被填满
contain---全部都能看到，但是可能填不满
20. 块级元素有哪些？ 行级元素有那些？
块级：table、ul、div、li、h1、p、form
行级（内联）：a、input、img
21. 转块级元素、转行内元素、转行内块级元素
块：display：block
行：display：inline
行内块：display：inline-block
22. 响应式定位：
（1）写在父类：display：flex
flex-wrap：父类如果宽度不够，考虑换行
（2）水平居中：jstify-content：center
space between 左右对齐，中间等距
space around 等距分布
（3）垂直居中：align-items：center
flex-start
flex-end
23. let 和const的区别：
let与const都是只在声明所在的块级作用域内有效。
let声明的变量可以改变，值和类型都可以改变，没有限制。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
24. Ajax请求时,如何解释json数据?
1.直接定义返回数据类型为json,然后请求成功后返回的数据就是json数据，
2.直接使用JSON.parse ()
25. 下面代码输出什么？
var salary = "1000$";
(function () {
console.log("Original salary was " + salary);
var salary = "5000$";
console.log("My New Salary " + salary);
})();
答案：
Original salary was undefined
My New Salary 5000$
26. 下面代码输出什么？
var z = 1, y = z = typeof y;
console.log(y);
答案：
undefined
27. JavaScript 中undefined和not defined的区别
未声明变量直接使用会抛出异常：var name is not defined，如果没有处理异常，代码就停止运行了。
undefined，不会发生异常
28. 下面的代码输出什么？
var y = 1;
if (function f(){}) {
y += typeof f;
}
console.log(y);
答案： 1undefined。
29. JavaScript中什么是闭包？写出一个例子
var func = function () {
var a=1;
return function (){
a++;
console.log(a);
};
}
30. 写一个mul函数，使用方法如下。
function mul (x) {
return function (y) {
return function (z) {
return x * y * z;
};
};
}
31. JavaScript怎么清空数组？
1. arrayList= [];
2. arrayList.length = 0;
32. 怎么判断一个object是否是数组(array)？
function isArray(obj){
return Object.prototype.toString.call( obj ) === '[object Array]';
}
33. 下面代码输出什么？
var output = (function(x){
delete x;
return x;
})(0);
console.log(output);
答案：0
delete 操作符是将object的属性删去的操作
34. 下面代码输出什么？
var x = { foo : 1};
var output = (function(){
delete x.foo;
return x.foo;
})();
console.log(output);
答案：undefine
35. 下面代码输出什么？
var Employee = {
company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);
输出是 xyz，这里的 emp1 通过 prototype 继承了 Employee的 company。emp1自己并没有company属性。所以delete操作符的作用是无效的。
36. 什么是undefined x 1？
当我们使用 delete 操作符删除一个数组中的元素，这个元素的位置就会变成一个占位符。打印出来就是undefined x 1。
37. 下面代码输出什么？
var trees = ["xyz","xxxx","test","ryan","apple"];
delete trees[3];
console.log(trees.length);
输出是5。因为delete操作符并不是影响数组的长度。
38. 下面代码输出什么？
var bar = true;
console.log(bar + 0);
console.log(bar + "xyz");
console.log(bar + true);
console.log(bar + false);
答案
1
truexyz
2
1
下面给出一个加法操作表
Number + Number -> 加法
Boolean + Number -> 加法
Boolean + Boolean -> 加法
Number + String -> 连接
String + Boolean -> 连接
String + String -> 连接
39. 下面代码输出什么？
var foo = function bar(){ return 12; };
typeof bar();
答案：bar is not defined
40. html5有哪些新特性、移除了那些元素？ 如何处理HTML5新标签的浏览器兼容版问题？
H5新特性：增强了图形渲染、影音、数据存储、多任务处理：绘画 canvas、localStorage、事件监听、 sessionStorage、websocket
移除的元素：<font> 字体标签、 <center> 水平居中、 <u> 下划线、 <big>
解决：document.createElement、最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
41. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
标准的css盒子模型宽高就是内容区宽高；
低端IE css盒子模型宽高 内边距﹢边界﹢内容区；
42. 在设置li标签display:inline-block;属性后，li之间出现空白间隙的原因，有什么解决办法
原因：<li>标签我们在书写的时候为了代码的简洁直观会换行，但是浏览器在解析的时候会把这个换行解析成一个字符。
解决办法：标签不换行、magin负值、让li不闭合
43. magin 和padding 分别适合什么场景使用
margin:
需要在border外侧添加空白时；
空白处不需要背景（色）时；
上下相连的两个盒子之间的空白，需要相互抵消时。
padding：
需要在border内测添加空白时；
空白处需要背景（色）时；
上下相连的两个盒子之间的空白，希望等于两者之和时。
44. localStorage的存储数组对象的方式
localStorage存储数据的格式都是以字符串的形式来存储的，
45. 前端解决跨域问题
解决跨域问题常用的解决方案有两个：
JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。
CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。
46. post和get请求的区别
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数
GET和POST本质上就是TCP链接，但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 GET产生一个TCP数据包；POST产生两个TCP数据包。（并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次）
47. 请求提交的方式有？
post、get、put、delete
48. ES5和ES6区别
多了let，匿名函数，不适用原型链继承类
49. 浏览器内核有？
四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko
50. Doctype作用
<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
51. 导入css样式有哪几种
1. 行内式 <span style="color:red;">行内式</span> 写在body标签中
2. 嵌入式 在style标签中写css样式，在body中引用
3. link
4. @import
