WEB前端开发工程师面试题

1、HTML&CSS1.Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义？Doctype 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式(quirksmode)。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如 Micro

2、softIE4 和 NetscapeNavigator4)的行为以防止老站点无法工作。浏览器根据 DOCTYPE 是否存在以及使用的哪种 DTD 来选择要使用的呈现方法。如果 XHTML 文档包含形式完整的 DOCTYPE,那么它一般以标准模式呈现。对于 HTML4.01 文档，包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现，但是有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现。DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。2.行内元素有哪些？块级元素

3、有哪些？CSS 的盒模型？行内元素有：abspanIbemimginputselectstrong块级元素有：divulollidldtddh1h2h3h4p 盒模型：marginborderpaddingwidth3.CSS 引入的方式有哪些？link 和import 的区别是？1.使用 LINK 标签将样式规则写在.css 的样式文件中，再以标签引入。2.使用import 引入跟 link 方法很像，但必须放在.中3.使用 STYLE 标签将样式规则写在.标签之中。4.使用 STYLE 属性将 STYLE 属性直接加在个别的元件标签里，元件(标签)STYLE=性质(属性)1:设定值 1;性

4、质(属性)2:设定彳 12;.5.使用标记弓 I 入样式两者区别：加载顺序的差别。当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而import 引用的 CSS 会等到页面全部被下载完再被加载。import 可以在 css 中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.cssimportsubl.css”；importsub2.css”；这样做有一个缺点，会对网站服务器产生过多的 HTTP 请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。4.CSS 选择符有哪些？哪些属性可以继承？优

5、先级算法如何计算？内联和 important 哪个优先级高?通配选择符*sRules类型选择符 EsRulestdfont-size:14px;width:120px;属性选择符EattrsRulesEattr=valuesRulesEattr=valuesRulesEattr|=valuesRuleshtitlecolor:blue;/*所有具有 title 属性的 h 对象*/spanclass=democolor:red;divspeed=fastdorun=nocolor:red;arel=copyrightcolor:black;包含选择符 E1E2sRulestabletdfont

6、-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-letterfirst-line:before:after可以继承

7、的有：font-sizefont-familycolor不可继承的般有：borderpaddingmarginbackground-colorwidthheight 等关于 CSSspecificityCSS 的 specificity 特性或称非凡性，它是衡量一个衡量 CSS 值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity 用一个四位的数字串（CSS2 是三位）来表示，更像四个级别,值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。在多个选择符应用于同一个元素上那么 Specificity 值高的最终获得优先级。选择符 S

8、pecificity 值列表：规则：1 .行内样式优先级 Specificity 值为 1,0,0,0,高于外部定义。如：sjweb外部定义指经由或标签定义的规则；2 .!important 声明的 Specificity 值最高；3.Specificity 值一样的情况下，按 CSS 代码中出现的顺序决定，后者 CSS 样式居上；4.由继续而得到的样式没有 specificity 的计算，它低于一切其他规则（比如全局选择符*定义的规则）算法：当遇到多个选择符同时出现时候按选择符得到的 Specificity 值逐位相加，数位之间没有进制比如说：0,0,0,5+0,0,0,5=0,0,0,10

9、 而不是 0,0,1,0就得到最终计算得的 specificity,然后在比较取舍时按照从左到右的顺序逐位比较。实例分析：1.divfont-size:12px;分析：1 个元素div,Specificity 值为 0,0,0,12 .bodydivpcolor:green;分析：3 个元素bodydivp,Specificity 值为 0,0,0,33.div.sjwebfont-size:12px;分析：1 个元素div,Specificity 值为 0,0,0,11 个类选择符.sjweb,Specificity 值为 0,0,1,0最终：Specificity 值为 0,0,1,14.

10、Div#sjwebfont-size:12px;分析：1 个元素div,Specificity 值为 0,0,0,11 个类选择符.sjweb,Specificity 值为 0,1,0,0最终：Specificity 值为 0,1,0,15 .htmlbodydivid=totalsCOIOirpc;分析：6 个元素htmlbodydivullipSpecificity 值为 0,0,0,61 个属性选择符id=totalsSpecificity 值为 0,0,1,02 个其他选择符Specificity 值为 0,0,0,0最终：Specificity 值为 0,0,1,6important

11、 的优先级最高使用!important 可以改变优先级别为最高，其次是 style 对象，然后是 idclasstag,另外在同级样式按照申明的顺序后出现的样式具有高优先级。5 .前端页面由哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。网页的结构层(structurallayer)由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”网页的表示层(presentationlayer)由 C

12、SS 负责创建。CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层(behaviorlayer)负责回答内容应该如何对事件做出反应这一问题。这是 Javascript语言和 DOM 主宰的领域。6 .css 的基本语句构成是？选择器属性 1:值 1；属卜 t2:值 2;,7 .你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？IE 内核浏览器：360,傲游，搜狗，世界之窗，腾讯 TT非 IE 内核浏览器：firefoxoperasafarichrome1 .就是 ie6 双倍边距的问题，在使用了 float 的情况下

13、，不管是向左还是向右都会出现双倍，最简单的解决方法就是用 display:inline;加到 css 里面去。2 .文字本身的大小不兼容。同样是 font-size:14px 的宋体文字，在不同浏览器下占的空间是不一样的，ie 下实际占高 16px,下留白 3px,ff 下实际占高 17px,上留白 1px,下留白 3px,opera 下就更不一样了。解决方案：给文字设定 line-height。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。3 .ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容撑

14、大，而 ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 heighto4 .还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能撑开容器宽度，ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义 widtho5 .浮动的清除，ff 下不清除浮动是不行的。6 .mirrormarginbug,当外层元素内有 float 元素时，外层元素如定义 margin-top:14px,将自动生成margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该类 bug 出现的情况较为复杂，远不只这一种出现条件，还

15、没系统整理。解决方案：外层元素设定 border 或设定 float。7 .吞吃现象，限于篇幅，我就不展开了。还是 ie6,上下两个 div,上面的 div 设置背景，却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个 zoom 好象是专门为解决 ie6bug 而生的。8 .注释也能产生 bug“多出来的一只猪。”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“picRotatestart”方法写注释。9.里加

16、 float,这是一个典型的，棘手的兼容问题，希望引起大家正视，给 li 不同的属性会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在ul 使用心得一文里有相关成果，却没给出问题解决的过程。10 .img 下的留白。解决方案：给 img 设定 display:block。11 .失去 line-height。文字,很遗憾，在 ie6 下单行文字 line-height 效果消失了。，原因是这个 inline-block 元素和 inline 元素写在一起了。解决方案：让 img 和文字都 float起来。12 .链接的

17、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-

18、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,内有的情况下，position:rel

19、ative 层下的 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 .如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、JS 与图片？11 .你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？.clearclear:both;display:block;overflow:hidden;visibility:hidden