WEB前端开发工程师面试题

[HTML&&CSS]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文档以混杂模式呈现。行内元素有哪些？块级元素有哪些？CSS的盒模型？行内元素有：abspanIbemimginputselectstrong块级元素有：divulollidldtddh1h2h3h4…p盒模型：marginborderpaddingwidthCSS引入的方式有哪些?link和@import的区别是?

使用LINK标签将样式规则写在.css的样式文献中，再以<link>标签引入。<linkrel=stylesheettype="text/css"href="example.css">使用@import引入跟link方法很像，但必须放在<STYLE>...</STYLE>中<STYLETYPE="text/css"><!--@importurl(css/example.css);--></STYLE>使用STYLE标签将样式规则写在<STYLE>...</STYLE>标签之中。<STYLETYPE="text/css"><!--body{color:#666;background:#f0f0f0;font-size:12px;td,p{color:#c00;font-size:12px;}--></STYLE>使用STYLE属性将STYLE属性直接加在个别的元件标签里，<元件(标签)STYLE="性质(属性)1:设定值1;性质(属性)2:设定值2;...}使用<span></span>标记引入样式<spanstyle="font:12px/20px#000000;"></span>两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面所有被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css———————-@import“sub1.css”;@import“sub2.css”;这样做有一个缺陷，会对网站服务器产生过多的HTTP请求，以前是一个文献，而现在却是两个或更多文献了，服务器的压力增大，浏览量大的网站还是谨慎使用。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;}子对象选择符E1>E2{sRules}

divul>lip{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等

============================

关于CSSspecificityCSS的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,12.bodydivp{color:green;}分析：3个元素{bodydivp}，Specificity值为0,0,0,33.div.sjweb{font-size:12px;}分析：1个元素{div}，Specificity值为0,0,0,11个类选择符{.sjweb}，Specificity值为0,0,1,0最终：Specificity值为0,0,1,14.Div#sjweb{font-size:12px;}分析：1个元素{div}，Specificity值为0,0,0,11个类选择符{.sjweb}，Specificity值为0,1,0,0最终：Specificity值为0,1,0,15.html>bodydiv[id=”totals”]ulli>p{color:red;}分析：6个元素{htmlbodydivullip}Specificity值为0,0,0,61个属性选择符{[id=”totals”]}Specificity值为0,0,1,02个其他选择符{>>}Specificity值为0,0,0,0最终：Specificity值为0,0,1,6!important的优先级最高使用!important可以改变优先级别为最高，另一方面是style对象，然后是id>class>tag，此外在同级样式按照申明的顺序后出现的样式具有高优先级。

前端页面由哪三层构成，分别是什么？作用是什么？

网页提成三个层次，即：结构层、表达层、行为层。

网页的结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

网页的表达层（presentationlayer）由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behaviorlayer）负责回答“内容应当如何对事件做出反映”这一问题。这是Javascript语言和DOM主宰的领域。css的基本语句构成是？

选择器{属性1:值1;属性2:值2;……}你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常碰到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

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/>里加float<div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视，给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。如何居中一个浮动元素?

设立容器的浮动方式为相对定位，然后拟定容器的宽高，比如宽500高300的层，然后设立层的外边距。

div{Width:500px;height:300px;Margin:-150px00-250px;position:relative;left:50%;top:50%;}有没有关注HTML5和CSS3?如有请简朴说一些您对它们的了解情况！

HTML5标签的改变：<header>,<footer>,<dialog>,<aside>,<figure>,<section>等

IE9以上开始支持

CSS3实现圆角，阴影，对文字加特效，增长了更多的CSS选择器。假如让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文献、JS与图片？你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？.clear{clear:both;disp