Home
最近因个人职业发展等原因，想去外面看下工作机会，然后面试了几家公司，当然面试情况：有通过的也有没通过的，没通过的主要还是自己面试准备的不够充分，so，打算在此处把前端面试中可能遇到的问题以及本人的一点面试心得整理此处，算是一种自我学习吧~
关于面试，不同面试官，面试内容差异也较大，通过最近的几次面试发，有的面试官问你的问题很多很杂很全也很偏，坑也多，duang的一下你就挂了，而有的面试官，面试的问题就相对少一下，但深度却要深一些。
另，问题答案仅作参考
- Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
- 什么是闭包(closure)？优缺点？
- 介绍一下css的盒子模型。
- CSS3 box-sizing 属性用法。
- HTML5的sessionStorage和localStorage以及cookie
- 常见兼容性问题？
- HTTP Request Headers 和 Response Headers 都有哪些值？
- http状态码有那些？
- 请谈一下HTML和XHTML的区别。
- 你知道多少种Doctype文档类型？
标签上title与alt属性的区别是什么？
- CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
- CSS3新增伪类举例
- CSS3有哪些新属性？
- 打开(隐藏)、关闭(显示)一个对象。Style的display以及visibility的参数是什么？
- DIV+CSS 实现三栏布局，要求中间栏自适应
- javascript中如何判断对象类型
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。闭包就是在函数内部定义的函数可访问其外部函数的作用域。
应用闭包场景主要是为了：设计私有的方法和变量。
这在做框架的时候体现更明显，有些方法和属性只是运算逻辑过程中的使用的，
不想让外部修改这些属性，因此就可以设计一个闭包来只提供方法获取。
闭包的缺点就是常驻内存，会增大内存开销，使用不当很容易造成内存泄露(IE内存泄露问题)。有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing 属性可以为三个值之一：content-box(default)|border-box|padding-box。
content-box：border和padding不计算入width之内
padding-box：padding计算入width内
border-box：border和padding计算入width之内，其实就是怪异模式了~
ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面
才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
cookie 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
1. web storage和cookie的共同点
都是保存在浏览器端，且同源的。
2. web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的(可达到5M或更大)。
Cookie的大小是受限的(不超过4K)，并且每次你请求一个新的页面的时候Cookie都会被发送过去，
这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
Web Storage不会自动把数据发给服务器，仅在本地保存。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，
不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，
作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生1.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
3.IE6双边距bug:块属性标签float后，又有横向的margin情况下，在ie6显示margin比设置的大。
4.浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，
同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入_display:inline;
将其转化为行内属性。(_这个符号只有ie6会识别)渐进识别的方式，从总体中逐渐排除局部。
5.IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
6.事件模型不同，.attachEvent 和 .addEventListener .detachEvent和.removeEventListener
IE事件模型只支持事件冒泡(Bubbling)不支持事件捕获(Capturing)
7.阻止浏览器默认行为:w3c调用e.preventDefault(),IE下则window.event.returnValue=false
8.阻止事件冒泡:在W3C标准里调用e.stopPropagation()，
而在IE下通过设置window.event.cancelBubble=true来实现。
9.DOMContentLoaded onreadystatechange complete
10.DOMMouseScroll FF onmousewheel 非FF
11.event.wheelDelta 上滚120 下-120 event.detail 上滚-3 下3
12.obj.getCurrentStyle[attr] getComputedStyle(obj,false)[attr]
13.XMLHttpRequest ActiveXObject('Mircorsoft.XMLHttp')
14.事件源srcElement||target toElement||relatedTarget
15.obj.setCapture();只有ie认 obj.releaseCapture();*/Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Cookie:BIDUPSID=A619DDC165924FE0FA2416B87C081FA9; PSTM=1440083528;
Host:sobird.me
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
Response Header
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=utf-8
Date:Tue, 25 Aug 2015 16:20:50 GMT
Server:Apache
Set-Cookie:PS_REFER=0; expires=Sun, 30-Aug-2015 16:20:50 GMT; path=/
tracecode:12502000530982001162082600
tracecode:12501992610527773194082600
Transfer-Encoding:chunked
Vary:Accept-Encoding100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，
表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
204 No Content 相应报文中包含若干首部和一个状态行，但没有实体的主体部分。
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 服务器端暂时无法处理请求（可能是过载或维护）。主要是对xhtml更规范了
1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须死使用小写
3. 所有的XML标记都必须合理嵌套
4. 所有的属性必须用引号""括起来
5. 把所有<和&特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使“--”
8. 图片必须有说明文字
//目前看，这个问题很low了，几乎没有面试官再问这个问题了吧~该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。alt属性是图片不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了。
HTML的绝大多数标签都支持title属性，alt只在<IMG>标签里才有。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）
可继承的样式： font-size font-family color, text-indent;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。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.
media query 媒体查询，多栏布局
border-image.test {
display: block;
display: none;
visibility: visible;
visibility: hidden;
}/*css*/
html, body {
margin: 0;
height: 100%;
}
.main {
height: 100%;
margin: 0 210px;
background: #ccc;
}
.left, .right {
width: 200px;
height: 100%;
background: #fefefe;
}
.left {
float: left;
}
.right {
float:right
}<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>// typeof 判断
typeof {}; // 'object'
typeof []; // 'object'
typeof new Date(); // 'object'
typeof (new RegExp) // 'object'
// instaceof 判断
([]) instanceof Array; // true
({}) instanceof Object; // true
({}) instanceof RegExp; // false
(new Date) instanceof Date; // true
// Object.prototype.toString.call([])
Object.prototype.toString.call({}); // 返回 "[object Object]"
Object.prototype.toString.call([]); // 返回 "[object Array]"
Object.prototype.toString.call(/reg/ig); // 返回 "[object RegExp]"