前端面试题2

2014年最新前端开发面试题（面霸题库）欢迎加入Javascript前端技术，群号为:85088298本人博客已经迁移至jruif.github.ioThelasttimethatrefresh:2014/3/1113:47:07本文总结了一些常见前端面试（多数源于网络），希望阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧。只求当时过关，非长久之计也！面试有几点需要注意：（来源程劭非老师Github:@wintercn|Weibo:寒冬winter）1.面试题目：根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。2.题目类型：技术视野、项目细节、理论知识型题，算法题，开放性题，案例题。3.进行追问：可以确保问到你开始不懂或者面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住。4.回答问题再棒，面试官（一般是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉像是相亲一样）5.资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。另外：资料刚刚收集，覆盖面比较广，包括了web端、移动端的知识点，根据你自己的需要选择性阅读即可。再次提一下：看或背面试题不像学校考试，死记硬背是没什么用的，看面试题是对理论知识的总结让自己表达的时候知道怎么说。答案有些不够正确和全面，问题问的不够好，欢迎补充你所知道的答案、技巧、题目；最好是现在网上找不到的。格式不断修改更新中。HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等1.Doctype作用?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?（1）、!DOCTYPE声明位于文档中的最前面，处于html标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：abspanimginputselectstrong（强调的语气）块级元素有：divulollidldtddh1h2h3h4…p（3）知名的空元素：brhrimginputlinkmeta鲜为人知的是：areabasecolcommandembedkeygenparamsourcetrackwbr3.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选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？*1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ulli）6.后代选择器（lia）7.通配符选择器（*）8.属性选择器（a[rel=external]）9.伪类选择器（a:hover,li:nth-child）*可继承：font-sizefont-familycolor,ULLIDLDDDT;*不可继承：borderpaddingmarginwidthheight;*优先级就近原则，样式定义最近者为准;*载入样式以最后载入的定位为准;优先级为:!importantidclasstagimportant比内联优先级高CSS3新增伪类举例：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，单选框或复选框被选中。6.如何居中div,如何居中一个浮动元素?给div设置一个宽度，然后添加margin:0auto属性div{width:200px;margin:0auto;}居中一个浮动元素确定容器的宽高宽500高300的层设置层的外边距.div{Width:500px;height:300px;//高度可以不设Margin:-150px00-250px;position:relative;相对定位background-color:pink;//方便看效果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比设置的大。浮动ie产生的双倍距离#box{float:left;width:10px;margin:000100px;}这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\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请求数。*Chrome中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust:none;解决.超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}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新的技术webworker,websockt,Geolocation移除的元素纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；*是IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架!--[ifltIE9]scriptsrc=![endif]--9.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作?一个满屏品字布局如何设计?*首先划分成头部、body、脚部；。。。。。*实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱HTML5。10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？*使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解这些框架的功能、性能、设计原理）*SublimeText、Eclipse、Notepad、Firebug、HttpWatch、Yslow。*城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）1.JavaScript原型，原型链?有什么特点？2.*原型对象也是普通的对象，是对象一个自带隐式的__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。3.*原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。4.5.*JavaScript的数据对象有那些属性值？6.7.writable：这个属性的值是否可以改。8.9.configurable：这个属性的配置是否可以删除，修改。10.11.enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。12.13.value：属性值。14.1