前端面试题目答案及总结
HTML和CSS
1、 如设置div水平垂直居中？有多少种方式可以实现？
1、水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半
<style>
*{
padding: 0;
margin: 0;
}
.box{
300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
100px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
2、定位和margin:auto;
<style>
*{
padding: 0;
margin: 0;
}
.box{
300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
3、绝对定位和transfrom
<style>
*{
padding: 0;
margin: 0;
}
.box{
300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
2、 HTML5新增语义化如何理解？说一说有哪些标签？
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
3、 CSS3和CSS有什么新增内容，可以讲一下吗？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
4、 在一个div中，如何设置一个button在div的右上角，有什么方式可以实现
1、可以给button设置float：right；
2、父元素设置相对定位，子元素设置绝对定位，right设置为0、top：0；
5、 请问你有写过0.5px的直线？
6、 css设置一个动画，从左到右滚动用到什么属性？
7、 前端常说的三层架构是指哪三层
8、 布局
9、 说说IE盒子和谷歌的区别
10、 为什么初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
JS
1、 Settimeout和SetInterout的区别，哪一个更安全？
2、 window.onload和document.ready的区别
3、 cookies和sessionstorage、session、localage的区别
4、 split和jion的区别？
5、 字符串反转
6、 同步和异步的理解
7、 闭包的作用、弊端、使用的场景，简单的说一下
8、 简单说一下继承，可以举例说明吗？
9、 简单说一下事件冒泡，如何阻止事件冒泡？
10、 null和undefined的区别
undefined是一个表示"无"的原始值，转为数值时为 当声明的变量还未被初始化时，变量的默认值为null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
（1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 （3）对象没有赋值的属性，该属性的值为undefined。 （4）函数没有返回值时，默认返回undefined。
（1）作为函数的参数，表示该函数的参数不是对象。 （2） 作为对象原型链的终点。
new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
11、 js的数据类型
12、 是否做个懒加载。
13、跨域
jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面
14、异步加载和延时加载
1.异步加载的方案： 动态插入script标签
2.通过ajax去获取js代码，然后通过eval执行
3.script标签上添加defer或者async属性
4.创建并插入iframe，让它异步执行js
5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。
框架
Vue
1、 vue的数据绑定，实现原理
2、 vue父子组件及传值
3、 路由传值，有什么方式
4、 vue的声明周期，简单说一下，dom是在哪个生命周期完成渲染的
5、 vue导航钩子有哪几种
6、 有使用过什么框架，简单说一下
其他的插件
1、 jQuery
2、 ajax
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
3、 ajax的理解，及后台返回数据如何接收？执行一个删除事件，要如何实现
3、 ajax请求数据步骤是什么？传输的数据是用明文还是暗文？
4、 es6有了解吗？平常有使用到哪些呢？是否可以举例说明。
其他问题
1、是否有看过源码 jQuery
2、HTTP代码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。