《web前端开发工程师面试题》由会员分享，可在线阅读，更多相关《web前端开发工程师面试题（6页珍藏版）》请在金锄头文库上搜索。
1、HTML & CSS1. Doctype? 严格模式与混杂模式- 如何触发这两种模式，区分它们有何意义?Doctype 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode） 。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Mi
2、crosoft IE 4 和 Netscape Navigator 4）的行为以防止老站点无法工作。浏览器根据 DOCTYPE 是否存在以及使用的哪种 DTD 来选择要使用的呈现方法。如果 XHTML 文档包含形式完整的 DOCTYPE，那么它一般以标准模式呈现。对于 HTML 4.01 文档，包含严格 DTD的 DOCTYPE 常常导致页面以标准模式呈现。包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现，但是有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现。DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。2. 行内元素
3、有哪些？块级元素有哪些？CSS 的盒模型？行内元素有：a b span I b em img input select strong块级元素有：div ul ol li dl dt dd h1 h2 h3 h4p盒模型：margin border padding width3. CSS 引入的方式有哪些? link 和import 的区别是?1. 使用 LINK 标签将样式规则写在.css 的样式文件中，再以标签引入。2. 使用import 引入跟 link 方法很像，但必须放在. 中3. 使用 STYLE 标签将样式规则写在. 标签之中。4. 使用 STYLE 属性将 STYLE 属性直接加
4、在个别的元件标签里，标记引入样式两者区别：加载顺序的差别。当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而import 引用的 CSS 会等到页面全部被下载完再被加载。import 可以在 css 中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css-import “sub1.css”;import “sub2.css”;这样做有一个缺点，会对网站服务器产生过多的 HTTP 请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。4. 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:b
6、lack; 包含选择符 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 : Pseu
7、do-Elements 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
10、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 body div id=”totals” ul li p color:red;分析：6 个元素 html
11、body div ul li p 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 ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。5. 前端页面由哪三层构成，分别是什么？作用是什么？网页分成三个层次，即：结构层、表示层、行为层。网页的结构层（struct
12、ural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义： “这是一个文本段。 ”网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。6. css 的基本语句构成是？选择器属性 1:值 1;属性 2:值 2;
13、7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？IE 内核浏览器：360，傲游，搜狗，世界之窗，腾讯 TT非 IE 内核浏览器：firefox opera safari chrome1.就是 ie6 双倍边距的问题，在使用了 float 的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用 display:inline;加到 css 里面去。2.文字本身的大小不兼容。同样是 font-size:14px 的宋体文字，在不同浏览器下占的空间是不一样的，ie 下实际占高 16px，下留白 3px，ff 下实际占
14、高 17px，上留白 1px，下留白 3px，opera 下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。3. ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容撑大，而ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。4. 还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能撑开容器宽度，ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义 width。5. 浮动
15、的清除，ff 下不清除浮动是不行的。6. mirrormargin bug，当外层元素内有 float 元素时，外层元素如定义 margin-top:14px，将自动生成margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定 border 或 设定 float。7. 吞吃现象，限于篇幅，我就不展开了。还是 ie6，上下两个 div，上面的 div 设置背景，却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用 zoom:1。这个 zoom 好象是专门为解决 ie6 bug 而生的。8. 注释也能产生 bug“多出来的一只猪。 ”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。9. 里加 float ，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给 li 不同的属性会有不同的解释效
