前端开发面试题及答案.docx
《前端开发面试题及答案.docx》由会员分享，可在线阅读，更多相关《前端开发面试题及答案.docx（9页珍藏版）》请在冰豆网上搜索。
前端开发面试题及答案
Whenyoucan'tfightdaddy,youcanonlydoithard!
整合汇编 简单易用（WORD文档/A4打印/可编辑/页眉可删）
前端开发面试题及答案
1.Doctype?
严格模式与混杂模式，如何触发这两种模式，区分它们有何意义?
Doctype声明位于文档中的最前面的位置，处于标签之前。
此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。
为了实现这一点，他们创建了两种呈现模式：
标准模式和混杂模式（quirksmode）。
在标准模式中，浏览器根据规范呈现页面，在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器（比如MicrosoftIE4和NetscapeNavigator4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2.行内元素有哪些？
块级元素有哪些？
CSS的盒模型？
行内元素有：
abspanIbemimginputselectstrong
块级元素有：
divulollidldtddh1h2h3h4…p
盒模型：
marginborderpaddingwidth
3.CSS引入的方式有哪些?
link和@import的区别是?
-1.使用LINK标签
将样式规则写在.css的样式文件中，再以link标签引入。
linkrel=stylesheettype="text/css"href="example.css"
-2.使用@import引入
跟link方法很像，但必须放在STYLE.../STYLE中
STYLETYPE="text/css"
!
--
@importurl（css/example.css）;--
/STYLE
-3.使用STYLE标签
将样式规则写在STYLE.../STYLE标签之中。
STYLETYPE="text/css"
!
--
body{color:
#666;background:
#f0f0f0;font-size:
12px;}td,p{color:
#c00;font-size:
12px;}--
/STYLE
-4.使用STYLE属性
将STYLE属性直接加在个别的元件标签里
元件（标签）STYLE="性质（属性）1:
设定值1;性质（属性）2:
设定值2;...}
-5.使用span/span标记引入样式
spanstyle="font:
12px/20px#000000;"
两者区别：
加载顺序的差别。
当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css———————-
@import“sub1.css”;@import“sub2.css”;
这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了。
服务器的压力增大，浏览量大的网站还是谨慎使用。
4.CSS选择符有哪些？
哪些属性可以继承？
优先级算法如何计算？
内联和important哪个优先级高？
通配选择符__{sRules}?
类型选择符E{sRules}
td{font-size:
14px;width:
120px;}?
属性选择符E[attr]{sRules}E[attr=value]{sRules}E[attr~=value]{sRules}E[attr|=value]{sRules}h[title]{color:
blue;}/__所有具有title属性的h对象__/span[class=demo]{color:
red;}
div[speed="fast"][dorun="no"]{color:
red;}a[rel~="copyright"]{color:
black;}?
包含选择符E1E2{sRules}tabletd{font-size:
14px;}?
子对象选择符E1E2{sRules}divullip{font-size:
14px;}
ID选择符#ID{sRules}?
类选择符E.className{sRules}?
选择符分组
E1,E2,E3{sRules}?
伪类及伪对象选择符
E:
Pseudo-Classes{sRules}
（Pseudo-Classes）[:
link:
hover:
active:
visited:
focus:
first-child:
first:
left:
right:
lang]E:
Pseudo-Elements{sRules}（Pseudo-Elements）[:
first-letter:
first-line:
before:
after]
可以继承的有：
font-sizefont-familycolor
不可继承的一般有：
borderpaddingmarginbackground-colorwidthheight等======================================
关于CSSspecificity
CSS的specificity
特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：
规则：
1.行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：
divstyle=”color:
red”sjweb/div
外部定义指经由link或style标签定义的规则；
2.!
important声明的Specificity值最高；
3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而得到的样式没有specificity的计算，它低于一切其他规则
（比如全局选择符__定义的规则）。
算法：
当遇到多个选择符同时出现时候，按选择符得到的Specificity值逐位相加，
{数位之间没有进制比如说：
0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析：
1.div{font-size:
12px;}
分析：
1个元素{div}，Specificity值为0,0,0,1
2.bodydivp{color:
green;}
分析：
3个元素{bodydivp}，Specificity值为0,0,0,3
3.div.sjweb{font-size:
12px;}
分析：
1个元素{div}，Specificity值为0,0,0,1;1个类选择符{.sjweb}，Specificity值为0,0,1,0
最终：
Specificity值为0,0,1,1
4.Div#sjweb{font-size:
12px;}
分析：
1个元素{div}，Specificity值为0,0,0,1;1个类选择符{.sjweb}，Specificity值为0,1,0,0
最终：
Specificity值为0,1,0,1
5.htmlbodydiv[id=”totals”]ullip{color:
red;}
分析：
6个元素{htmlbodydivullip}
Specificity值为0,0,0,6;1个属性选择符1{[id=”totals”]}Specificity值为0,0,1,0;2个其他选择符{}Specificity值为0,0,0,0
最终：
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.你做的页面在哪些流览器测试过？
这些浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些？
怎么会出现？
解决方法是什么？
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下则会优先考虑内容折行。
故，内容可能撑破的浮动容器需要定义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下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。
解决方案：
用“!
–[if!
IE]picRotatestart!
[endif]–”方法写注释。
-9.li/里加floatdiv/，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。
在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
-10.img下的留白。
解决方案：
给img设定display:
block。
-11.失去line-height。
divstyle=”line-height:
20px”img/文字/div，很遗憾，在ie6下单行文字line-height效果消失了。
原因是img/这个inline-block元素和inline元素写在一起了。
解决方案：
让img和文字都float起来。
-12.链接的hover状态。
a:
hoverimg{width:
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元素如果作为布局用或复杂的容器，都要给个宽度的。
-16.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的`div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。
解决方案给内层相对层float属性。
-17.ie6下的bug，head/head内有basetarget=”_blank”/的情况下，position:
relative层下的float层内文字无法选中。
-18.终于来了个ff的缺点。
width:
100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:
100%才行，累啊。
opera这点倒学乖了跟了ie。
8.如何居中一个浮动元素?
设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500高300的层，然后设置层的外边距。
div{Width:
500px;height:
300px;Margin:
-150px00-250px;position:
relative;left:
50%;top:
50%;}
9.有没有关注HTML5和CSS3?
如有请简单说一些您对它们的了解情况！
HTML5标签的改变：
header,footer,dialog,aside,figure,section等IE9以上开始支持
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。
10.如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
11.你对前端界面工程师这个职位是怎么样理解的？
它的前景会怎么样？
前端开发笔试面试常考题与答案收集
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的css中添加：
display:
inline;这样就可避免双倍边距bug。
2、像素问题及解决办法
当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以，用“暴-力破解”吧，比如.left_margin-right:
-3px;，还有一种方法是也设置float
例：
样式：
viewplainprint?
.left{width:
100px;height:
100px;background:
#096;float:
left;}
.right{width:
200px;height:
100px;background:
#39F;}
HTML：
divclass="left"在ie6下的显示状态/div
divclass="right"在ie6下的显示状态/div/ppp在ie6浏览状态下，我们看到。
绿色div与蓝色div中间出现了一条空隙。
这就是ie6下3像素bug问题。
/p/body
结果：
3、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
这种情况可在父窗口加上overflow:
auto;_zoom:
1;这两个样式属性，overflow:
auto;是让父容器来自适应内部容器的高度，
_zoom:
1;是为了兼容IE6而使用的CSSHACK。
4、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。
例如：
.c{background-color:
#f00;height:
2px;/__给定任何小于20px的高度__/}
divclass="c"/div
如果不让它默认为19PX。
而是0PX的话
解决方法有3种：
1.）css里面加上overflow:
hidden;
2.）div里面加上注释,
divclass="c"!
––/div
3.）css里面加上line-height:
0;然后div里面加上#nbsp;,
divclass="c"nbsp;/div（#换成）
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本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.
SEO主要还是靠你网站的内容和外部链接的。
（转载请注明出处：
WEB前端开发）
6.便于团队开发和维护
W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
升级会员 