前端工程师面试试题.docx
《前端工程师面试试题.docx》由会员分享，可在线阅读，更多相关《前端工程师面试试题.docx（16页珍藏版）》请在冰豆网上搜索。
前端工程师面试试题
2014年最新前端开发面试题
Thelasttimethatrefresh:
2014/1/1312:
37:
57
本文主要是由于我最近在找前端开发职位，所以总结了一些常见前端面试（多数来源于网络），希望看的朋友，阅后也要用心钻研其中的原理，重要知识需要系统学习，形成自己的知识链。
万不可投机取巧。
只求当时过关，非长久之计也！
面试有几点需要注意：
（来源@wintercn）
面试题目会根据你的等级和职位变化，入门级到专家级：
范围↑、深度↑、方向↑;类型：
技术视野、项目细节、理论知识型题，算法题，开放性题，案例题。
进行追问，可以确保问到你开始不懂或者面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。
因为这种关联知识是长时期的学习，绝对不是临时记得住。
回答问题再棒，面试官（一般是你顶头上司面你），会考虑，我要不要这个人做我的同事？
所以态度很重要。
资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。
另外：
资料刚刚收集，答案有些不够正确和全面，欢迎补充你所知道的答案、技巧、题目；最好是现在网上找不到的。
格式不太美观，容我学一下markdown语法再来排版。
Begin！
HTML、CSS部分
要点：
对Web标准的理解、浏览器差异、CSS基本功：
布局、盒子模型、选择器优先级及使用、HTML5、CSS3技术等
Doctype作用?
严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、
DOCTYPE>声明位于文档中的最前面，处于标签之前。
告知浏览器的解析器，
用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。
模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.行内元素有哪些？
块级元素有哪些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素；
span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：
abspanimginputselectstrong（强调的语气）
块级元素有：
divulollidldtddh1h2h3h4…p
3.CSS的盒子模型？
（1）两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;
（2）盒模型：
内容（content）、填充（padding）、边界（margin）、边框（border）.
4.link和@import的区别是?
（1）、link属于XHTML标签，而@import完全是CSS提供的一种方式;
（2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题;
（4）、link方式的样式的权重高于@import的权重.
5.CSS选择符有哪些？
哪些属性可以继承？
优先级算法如何计算？
em和px有什么关系？
*ID和Class;
*Class可继承、font-sizefont-familycolor,列表ULLIDLDDDT可继承;
*不可继承：
borderpaddingmarginwidthheight;
*优先级就近原则，样式定义最近者为准;
*载入样式以最后载入的定位为准;
优先级为:
!
important>id>class>tag
important比内联优先级高
如果父元素定义字体大小12px，子元素定义1em，大小就是12px。
6.如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:
0auto属性
div{
width:
200px;
margin:
0auto;
}
设置容器的浮动方式为相对定位确定容器的宽高宽500高300的层设置层的外边距
.Div{
Width:
500px;height:
300px;
Margin:
-150px00-250px;
position:
absolute;
left:
50%;
top:
50%;
}
7.浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些？
原因，解决方法是什么，hack的技巧？
*IE浏览器的内核Trident、Mozilla的Gecko、google的WebKit、Opera内核Presto；
*png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
*浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:
0;padding:
0;}来统一。
*IE6双边距bug:
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
解决方案是在float的标签样式控制中加入display:
inline;将其转化为行内属性。
*浮动ie产生的双倍距离#box{float:
left;width:
10px;margin:
000100px;
//这种情况之下IE会产生20px的距离，这时需要设置display:
inline;//使浮动忽略}
*渐进识别的方式，从总体中逐渐排除局部。
*首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```css
.bb{
background-color:
#f1ee18;/*所有识别*/
.background-color:
#00deff\9;/*IE6、7、8识别*/
+background-color:
#a200ff;/*IE6、7识别*/
_background-color:
#1e0bd1;/*IE6识别*/
}
```
*IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute（）获取自定义属性;
Firefox下,只能使用getAttribute（）获取自定义属性.
解决方法:
统一通过getAttribute（）获取自定义属性.
*IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
*（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
8.html5\CSS3有哪些新特性、移除了那些元素？
如何处理HTML5新标签的浏览器兼容问题？
如何区分HTML和HTML5？
HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，功能的优化和改进。
*绘画canvas元素
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器多背景rgba
新的技术webworkerwebsockt
移除的元素
纯表现的元素：
basefont，big，center，font,s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
*是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
--[ifltIE9]>