前端开发面试题及答案.doc

前端开发面试题及答案标签:标题2016前端开发面试题及答案 标记引入样式 两者区别:加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如: main.css- import“sub1.css”;import“sub2.css”; 这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了。服务器的压力增大，浏览量大的网站还是谨慎使用。 4.CSS选择符有哪些,哪些属性可以继承,优先级算法如何计算,内联和important哪个优先级高, 通配选择符*sRules? 类型选择符EsRules tdfont-size:14px;width:120px;? 属性选择符EattrsRulesEattr=valuesRulesEattr=valuesR1 / 16 -感谢观看本文-谢谢-标签:标题2016ulesEattr|=valuesRuleshtitlecolor:blue;/*所有具有title属性的h对象*/spanclass=democolor:red; divspeed=“fast”dorun=“no”color:red;arel=“copyright”color:black;? 包含选择符E1E2sRulestabletdfont-size:14px;? 子对象选择符E1E2sRulesdivullipfont-size:14px; ID选择符#IDsRules? 类选择符E.classNamesRules? 选择符分组 E1,E2,E3sRules? 伪类及伪对象选择符 E:Pseudo-ClassessRules (Pseudo-Classes):link:hover:active:visited:focus:first-child:first:left:right:langE:Pseudo-ElementssRules(Pseudo-Elements):first-letter:first-line:before:after 可以继承的有:font-sizefont-familycolor 不可继承的一般有:borderpaddingmarginbackground-colorwidthheight等= 关于CSSspecificity CSS的specificity 2 / 16 -感谢观看本文-谢谢-标签:标题2016特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。 选择符Specificity值列表: 规则: 1.行内样式优先级Specificity值为1,0,0,0，高于外部定义。 如:sjweb 外部定义指经由或标签定义的规则; 2.!important声明的Specificity值最高; 3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上; 4.由继续而得到的样式没有specificity的计算，它低于一切其他规则 (比如全局选择符*定义的规则)。 算法: 当遇到多个选择符同时出现时候，按选择符得到的3 / 16 -感谢观看本文-谢谢-标签:标题2016Specificity值逐位相加， 数位之间没有进制比如说:0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。 实例分析: 1.divfont-size:12px; 分析:1个元素div，Specificity值为0,0,0,1 2.bodydivpcolor:green; 分析:3个元素bodydivp，Specificity值为0,0,0,3 3.div.sjwebfont-size:12px; 分析:1个元素div，Specificity值为0,0,0,1;1个类选择符.sjweb，Specificity值为0,0,1,0 最终:Specificity值为0,0,1,1 4.Div#sjwebfont-size:12px; 分析:1个元素div，Specificity值为0,0,0,1;1个类选择符.sjweb，Specificity值为0,1,0,0 最终:Specificity值为0,1,0,1 5.htmlbodydivid=”totals”ullipcolor:red; 分析:6个元素htmlbodydivullip Specificity值为0,0,0,6;1个属性选择符1id=”totals”Specificity值为0,0,1,0;2个其他选择符Specificity值为0,0,0,0 4 / 16 -感谢观看本文-谢谢-标签:标题2016最终:Specificity值为0,0,1,6 !important的优先级最高 使用!important可以改变优先级别为最高，其次是style对象，然后是idclasstag，另外在同级样式按照申明的顺序后出现的样式具有高优先级。 5.前端页面由哪三层构成，分别是什么,作用是什么, 网页分成三个层次，即:结构层、表示层、行为层。 网页的结构层(structurallayer)由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义:“这是一个文本段。” 网页的表示层(presentationlayer)由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。 网页的行为层(behaviorlayer)负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域。 6.css的基本语句构成是, 选择器属性1:值1;属性2:值2;? 7.你做的页面在哪些流览器测试过,这些浏览器的5 / 16 -感谢观看本文-谢谢-标签:标题2016内核分别是什么?经常遇到的浏览器的兼容性有哪些,怎么会出现,解决方法是什么, IE内核浏览器:360，傲游，搜狗，世界之窗，腾讯TT 非IE内核浏览器:firefoxoperasafarichrome -1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。 -2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案:给文字设定line-height。确保所有文字都有默认的line-height值。这点很重要，在高度上我们不能容忍1px的差异。 -3.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。 -4.还讨论内容撑破容器问题，横向上的。如果float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮6 / 16 -感谢观看本文-谢谢-标签:标题2016动容器需要定义width。 -5.浮动的清除，ff下不清除浮动是不行的。 -6.mirrormarginbug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案:外层元素设定border或设定float。 -7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6bug而生的。 -8.注释也能产生bug“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案:用“picRotatestart”方法写注释。 -9.里加float，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该7 / 16 -感谢观看本文-谢谢-标签:标题2016问题。在ul使用心得一文里有相关成果，却没给出问题解决的过程。 -10.img下的留白。解决方案:给img设定display:block。 -11.失去line-height。文字，很遗憾，在ie6下单行文字line-height效果消失了。原因是这个inline-block元素和inline元素写在一起了。解决方案:让img和文字都float起来。 -12.链接的hover状态。a:hoverimgwidth:300px我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。 -13.非链接的hover状态。div:hover这样的样式ie6是不认的，在ie7、ff下才有效果。 -14.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。 -15.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。 8 / 16 -感谢观看本文-谢谢-标签:标题2016-16.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。 -17.ie6下的bug，内有的情况下，position:relative层下的float层内文字无法选中。 -18.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。 8.如何居中一个浮动元素? 设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500高300的层，然后设置层的外边距。 divWidth:500px;height:300px;Margin:-150px00-250px;position:relative;left:50%;top:50%; 9.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况 HTML5标签的改变:,等IE9以上开始支持 CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。 10.如果让你来制作一个访问量很高的大型网站，你9 / 16 -感谢观看本文-谢谢-标签:标题2016会如何来管理所有CSS文件、JS与图片, 11.你对前端界面工程师这个职位是怎么样理解的,它的前景会怎么样, #2楼回目录前端开发面试题及答案前端开发面试题及答案|2015-09-0915:10前端开发笔试面试常考题与答案收集#e# 1、列举你工作中遇到的IE6BUG，谈谈解决方案。 作为一名前端，我们通常要做的就是让页面在各系统浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Operaetc.这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。 1、IE6双倍边距bug 假如为一个div设置css: viewplainprint?float:left;margin-left:10px;在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css10 / 16 -感谢观看本文-谢谢-标签:标题2016中添加:display:inline;这样就可避免双倍边距bug。 2、像素问题及解决办法 当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以，用“暴-力破解”吧，比如.left_margin-right:-3px;，还有一种方法是也设置float 例:样式: viewplainprint?.leftwidth:100px;height:100px;background:#096;float:left;.rightwidth:200px;height:100px;background:#39F; HTML: 在ie6下的显示状态 在ie6下的显示状态 在ie6浏览状态下，我们看到。绿色div与蓝色div中间出现了一条空隙。这就是ie6下3像素bug问题。 结果: 3、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度, 这种情况可在父窗口加上overflow:auto;_zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度， _zoom:1;是为了兼容IE6而使用的CSSHACK。 11 / 16 -感谢观看本文-谢谢-标签:标题20164、IE6中奇数宽高的BUG IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。 5、IE6下为什么图片下方有空隙产生 解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img为display:block 或者定义vertical-align属性值为vertical-align:top|bottom|middle|text-bottom 还可以设置父容器的字体大小为零，font-size:0 6、ie6下空标签高度问题 一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。 例如: .cbackground-color:#f00;height:2px;/*给定任何小于20px的高度*/ 如果不让它默认为19PX。而是0PX的话 解决方法有3种: 1.)css里面加上overflow:hidden; 2.)div里面加上注释, 3.)css里面加上line-height:0;然后div里面加上#nbsp;, 12 / 16 -感谢观看本文-谢谢-标签:标题2016(#换成&) 2、如何用CSS分别单独定义IE6、7、8的width属性。 所有浏览器通用 height:100px; IE6专用 _height:100px; IE6专用 *height:100px; IE7专用 *+height:100px; IE7、FF共用 height:100px!important; 3、CSS中哪些属性可以同父元素继承。 继承:文本类的均可继承，列表元素可继承 4、你如何理解HTML结构的语意化。 1.去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的，我们看到例如是粗体，字体大小2em，加粗;是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认13 / 16 -感谢观看本文-谢谢-标签:标题2016样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。 2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音. 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱). 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备).例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 14 / 16 -感谢观看本文-