WEB前端开发工程师面试题

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

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

3、n I b em img input select strong 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p 盒模型： margin border padding width3. CSS引入的方式有哪些 link 和import的区别是4.1. 使用LINK标签将样式规那么写在.css的样式文件中,再以标签引入.2. 使用import引入跟link方法很像,但必须放在 . 中3. 使用STYLE标签将样式规那么写在. 标签之中.4. 使用STYLE属性将STYLE属性直接加在个别的元件标签里,元件(标签)STYLE=性质(属性)1:设定值1;性质(属性)

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

5、内联和 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 htitle color: blue; /*所有具有 title 属性的 h 对象 */spanclass=demo color: red; divspeed=fastdorun=no color: red; arel=copyright color:black; 包

6、含选择符 E1 E2 sRules table td font-size:14px; 子对象选择符 E1 E2 sRules div ulli p 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 :langE : Pseudo-Eleme

7、nts sRules (Pseudo-Elements ):first-letter first-line :before :after font-size font-family color不可继承的般有：border padding margin background-color width height 等关于 CSS specificityCSS的specificity特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串CSS2是三位来表示,更像四个级别,值从左到右,左面的最大,一级大于一

8、级,数位之间没有进制,级别之间不可超越.在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级.选择符Specificity值列表：规那么：1 .行内样式优先级Specificity值为1,0,0,0 ,高于外部定义.如:sjweb外部定义指经由或标签定义的规那么；2 .!important 声明的 Specificity 值最高；3.Specificity值一样的情况下,按 CSS代码中出现的顺序决定,后者 CSS样式居上；4.由继续而得到的样式没有specificity的计算,它低于一切其他规那么比方全局选择符*定义的规那么.算法：当遇到多个选择符同时出现时候按选择符

9、得到的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 .body div pcolor: green;分析：3 个元素 body div p , Specificity 值为 0,0,0,33.div .sjweb font-size:12px;分析：1 个元素 div , Specificit

10、y 值为 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 body div id= totals ul li p color:red;分析：6. 个元素 html body div ul li p Specificity 值为 0,

11、0,0,61 个属性选择符 id= totals w Specificity 值为 0,0,1,02个其他选择符 Specificity 值为0,0,0,0最终：Specificity 值为 0,0,1,6important 的优先级最高使用！important可以改变优先级别为最高,其次是 style对象,然后是id class tag ,另外在同级样式根据 申明的顺序后出现的样式具有高优先级.7. 前端页面由哪三层构成,分别是什么作用是什么8. 网页分成三个层次,即：结构层、表示层、行为层.9. 网页的结构层(structural layer )由HTML或XHTML之类的标记语言负责创立

12、.标签,也就是那些出现在 尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信 息.例如,P标签表达了这样一种语义：“这是一个文本段.10. 页的表示层(presentation layer )由CSS负责创立.CSS对“如何显示有关内容的问题做出了答复.11. 网页的行为层(behavior layer )负责答复内容应该如何对事件做出反响这一问题.这是 Javascript语言 和DOM主宰的领域.12. css的根本语句构成是13. 选择器属性1:值1;属性2:值2;14. 你做的页面在哪些流览器测试过这些浏览器的内核分别是什么经常遇到的浏览器的兼

13、容性有哪些怎么会 出现解决方法是什么15. IE内核浏览器：360,傲游,搜狗,世界之窗,腾讯 TT16. 非 IE 内核浏览器： firefox opera safari chrome17. 1.就是ie6双倍边距的问题,在使用了float的情况下,不管是向左还是向右都会出现双倍,最简单的解决方法就是用display:inline;加到css里面去.18. 2.文字本身的大小不兼容.同样是font-size:14Px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px, ff下实际占高17px,上留白1px,下留白3px, opera下就更不一样了.解决方 案：

14、给文字设定line-height .保证所有文字都有默认的line-height值.这点很重要,在高度上我们不能容忍1px的差异.19. 3. ff下容器高度限定,即容器定义了 height之后,容器边框的外形就确定了,不会被内容撑大,而 ie下是会 被内容撑大,高度限定失效.所以不要轻易给容器定义height o20. 4.还讨论内容撑破容器问题,横向上的.如果 float容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下 那么会优先考虑内容折行.故,内容可能撑破的浮动容器需要定义width o21. 5.浮动的去除,ff下不去除浮动是不行的.22. 6. mirrormargin bu

15、g ,当外层元素内有 float元素时,外层元素如定义 margin-top:14Px ,将自动生成 margin-bottom:14Px .padding也会出现类似问题,都是ie6下的特产,该类 bug出现的情况较为复杂,远不只这一种出现条件,还没系统整理.解决方案：外层元素设定border或设定float.23. 7.吞吃现象,限于篇幅,我就不展开了.还是 ie6,上下两个div,上面的div设置背景,却发现下面没有设 置背景的div也有了背景,这就是吞吃现象.对应上面的背景吞吃现象,还有滚动下边框缺失的现象.解决 方案：使用zoom:1.这个zoom好象是专门为解决ie6 bug而生的

16、.24. 8.注释也能产生bug “多出来的一只猪.这是前人总结这个bug使用的文案,ie6的这个bug下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变.解决方案：用“ picRotate start!endif- 方法写注释.25. 9. 里加float ,这是一个典型的,棘手的兼容问题,希望引起大家正视,给li不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门 讨论该问题.在?ul使用心得?一文里有相关成果,却没给出问题解决的过程.26. 10. img下的留白.解决方案：给 img设定display:bloc

17、k .27. 11.失去 line-height . 文字 ,很遗憾,在 ie6 下单行文字 line-height效果消失了.,原因是 这个inline-block元素和inline元素写在一起了.解决方案：让 img和文字都float起来.28. 12.链接的hover状态.a:hover imgwidth:300px我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效.29. 13.非链接的hover状态.div:hover这样的样式ie6是不认的,在ie7、ff下才有效果.30. 14. ie下overflow:hidden 对其下的绝对层 pos

18、ition:absolute 或者相对层 position:relative 无效.解决方案：给 overflow:hidden 力口 position:relative 或者 position:absolute . 另,ie6 支持 overflow-x 或者 overflow-y 的特性, ie7、ff不支持.31. 15. ie6下严重的bug , float元素如没定义宽度,内部如有 div定义了 height或zoom:1 ,这个div就会占满一 整行,即使你给了宽度.float元素如果作为布局用或复杂的容器,都要给个宽度的.32. 16. ie6下的bug,绝对定位的div下包含相

19、对定位的div ,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大.解决方案给内层相对层float属性.33. 17. ie6 下的 bug , 内有 的情况下,position:relative 层下的 float 层 内文字无法选中.34. 18.终于来了个ff的缺点.width:100%这个东西在ie里用很方便,会向上逐层搜索 width值,无视浮动层的影 响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊.opera这点倒学乖了跟了 ie.35. 如何居中一个浮动元素36. 设置容器的浮动

20、方式为相对定位,然后确定容器的宽高,比方宽500高300的层,然后设置层的外边距.37. divWidth:500px;height:300px;Margin: -150Px 0 0 -250px;position:relative;left:50%;top:50%;38. 有没有关注HTML5和CSS3如有请简单说一些您对它们的了解情况！39. HTML5 标签的改变：, , , , , 等40. IE9以上开始支持41. CSS3实现圆角,阴影,对文字加特效,增加了更多的 CSS选择器.42. 如果让你来制作一个访问量很高的大型网站,你会如何来治理所有CSS文件、JS与图片43. 你对前端界面工程师这个职位是怎么样理解的它的前景会怎么样.clear clear: both;display: block;overflow: hidden;visibility