《WEB前端开发工程师面试题》由会员分享，可在线阅读，更多相关《WEB前端开发工程师面试题（6页珍藏版）》请在金锄头文库上搜索。
1、HTML & CSS1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?Doctype 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创 建了两种呈现模式：标准模式和混杂模式(quirks mode)。在标准模式中，浏览器根据规范呈现页面; 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如 M
2、icrosoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档 包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的 DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模 式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确 会导致HTML和XHTML文档以混杂模式呈现。2. 行内元素有哪些？块级元素有哪些？ CSS的盒模型？行内元
3、素有： 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属性直接加在个别的元件标签里,元件（标签）STYLE=性质（属性）1:设定值1;性质（属
4、性）2:设 定值2;5. 使用标记引入样式两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，Wimport引用 的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: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-Elem
7、ents 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 ，Specifi
10、city值为 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” （uOldrired;p 分析：6 个元素 html body div ul li p Specificity 值为 0,0,0,61 个
11、属性选择符 id=” totals” Specificity 值为 0,0,1,02个其他选择符 Specificity值为0,0,0,0最终：Specificity 值为 0,0,1,6important的优先级最高使用important可以改变优先级别为最高，其次是style对象，然后是id class tag，另外在同级样 式按照申明的顺序后出现的样式具有高优先级。5. 前端页面由哪三层构成，分别是什么？作用是什么？ 网页分成三个层次，即：结构层、表示层、行为层。网页的结构层(structural layer)由HTML或XHTML之类的标记语言负责创建。标签，也就是那些 出现在尖括号里
12、的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有 关内容的信息。例如， P 标签表达了这样一种语义：“这是一个文本段。”网页的表示层(presentation layer)由CSS负责创建。CSS对“如何显示有关内容”的问题做出 了回答。网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript 语言和 DOM 主宰的领域。6. css 的基本语句构成是？选择器属性1：值1；属性2:值2;7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么 ?经常遇到的浏览器的兼容性有哪 些？怎么会出现？解决方法是什
13、么？IE内核浏览器：360,傲游，搜狗，世界之窗，腾讯TT非 IE 内核浏览器：firefox opera safari chrome1就是ie6双倍边距的问题，在使用了 float的情况下，不管是向左还是向右都会出现双倍，最简单的 解决方法就是用display:inline;加到css里面去。2文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的， ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一 样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要， 在高度上我们不能容忍1 px 的差异。3. ff下容器高度限定，即容器定义了 height之后，容器边框的外形就确定了，不会被内容撑大，而ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。4. 还讨论内容撑破容器问题，横向上的。如果float容器未定义宽度，ff下内容会尽可能撑开容器宽 度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义widtho5. 浮动的清除，ff下不清除浮动是不行的。6. mirrormargin bug，当外层元素内有fl
