《WEB前端开发工程师面试题（最新精选汇编）-（最新版-已修订）》由会员分享，可在线阅读，更多相关《WEB前端开发工程师面试题（最新精选汇编）-（最新版-已修订）（6页珍藏版）》请在金锄头文库上搜索。
1、HTML 性质(属性)2: 设定值 2; . 5.使用标记引入样式 两者区别：两者区别：加载顺序的差别。当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而import 引用 的 CSS 会等到页面全部被下载完再被加载。 import 可以在 css 中再次引入其他样式表， 比如可以创建一 个主样式表，在主样式表中再引入其他的样式表，如： main.css - import “sub1.css”; import “sub2.css”; 这样做有一个缺点，会对网站服务器产生过多的 HTTP 请求，以前是一个文件，而现在却是两个或更多文 件了，服务器的压力增大，浏览量大的网站还是谨慎
2、使用。 4.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 htitle color: blue; /* 所有具有 title 属性的 h 对象 */ spanclass=de
3、mo color: red; divspeed=fastdorun=no color: red; arel=copyright color:black; 包含选择符 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 :hov
4、er :active :visited :focus :first-child :first :left :right :lang E : Pseudo-Elements sRules ( Pseudo-Elements ):first-letter :first-line :before :after 可以继承的有：font-size font-family color 不可继承的一般有：border padding margin background-color width height 等 = 关于 CSS specificity CSS 的 specificity 特性或称非凡性，它是
5、衡量一个衡量 CSS 值优先级的一个标准，既然作为标准，就具 有一套相关的判定规定及计算方式， specificity 用一个四位的数 字串(CSS2 是三位)来表示， 更像四个级别， 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 在多个选择符应用于同一个元素上那么 Specificity 值高的最终获得优先级。 选择符 Specificity 值列表： 规则： 1. 行内样式优先级 Specificity 值为 1,0,0,0，高于外部定义。 如：sjweb 外部定义指经由或标签定义的规则； 2.!important 声明的 Specificity 值最高； 3
6、.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，Spe
7、cificity 值为 0,0,0,1 2.body div pcolor: green; 分析： 3 个元素 body div p ，Specificity 值为 0,0,0,3 3.div .sjweb font-size:12px; 分析： 1 个元素 div ，Specificity 值为 0,0,0,1 1 个类选择符.sjweb，Specificity 值为 0,0,1, 0 最终：Specificity 值为 0,0,1,1 4.Div # sjweb font-size:12px; 分析： 1 个元素 div ，Specificity 值为 0,0,0,1 1 个类选择符.sj
8、web，Specificity 值为 0,1,0, 0 最终：Specificity 值为 0,1,0,1 5.html body div id=”totals” ul li p color:red; 分析： 6 个元素 html body div ul li p Specificity 值为 0,0,0,6 1 个属性选择符 id=”totals” Specificity 值为 0,0,1,0 2 个其他选择符 Specificity 值为 0,0,0,0 最终：Specificity 值为 0,0,1,6 !important 的优先级最高 使用!important 可以改变优先级别为最高
9、，其次是 style 对象，然后是 id class tag ，另外在同级样 式按照申明的顺序后出现的样式具有高优先级。 5.前端页面由哪三层构成，分别是什么？作用是什么？前端页面由哪三层构成，分别是什么？作用是什么？ 网页分成三个层次，即：结构层、表示层、行为层。 网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些 出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有 关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。 ” 网页的表示层（presentation layer
10、） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出 了回答。 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。 6.css 的基本语句构成是？的基本语句构成是？ 选择器属性 1:值 1;属性 2:值 2; 7.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪 些？怎么会出现？解决方法是什么？ 经常遇到的浏览器的兼容性有哪 些？怎么会出现？解决方法是什么？ IE 内核浏览器：360，傲游
11、，搜狗，世界之窗，腾讯 TT 非 IE 内核浏览器：firefox opera safari chrome 1.就是 ie6 双倍边距的问题，在使用了 float 的情况下，不管是向左还是向右都会出现双倍，最简单的 解决方法就是用 display:inline;加到 css 里面去。 2.文字本身的大小不兼容。 同样是 font-size:14px 的宋体文字， 在不同浏览器下占的空间是不一样的， ie 下实际占高 16px， 下留白 3px， ff 下实际占高 17px， 上留白 1px， 下留白 3px， opera 下就更不一样了。 解决方案：给文字设定 line-height 。确保所
12、有文字都有默认的 line-height 值。这点很重要，在高度 上我们不能容忍 1px 的差异。 3. ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容撑大，而 ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。 4. 还讨论内容撑破容器问题， 横向上的。 如果 float 容器未定义宽度， ff 下内容会尽可能撑开容器宽度， ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义 width。 5. 浮动的清除，ff 下不清除浮动是不行的。 6. mirrormargin bug，当外层元素内有 float 元素
13、时，外层元素如定义 margin-top:14px，将自动生成 margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该类 bug 出现的情况较为复 杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定 border 或 设定 float。 7. 吞吃现象，限于篇幅，我就不展开了。还是 ie6，上下两个 div，上面的 div 设置背景，却发现下面 没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失 的现象。解决方案：使用 zoom:1。这个 zoom 好象是专门为解决 ie6 bug 而生的。 8
14、. 注释也能产生 bug“多出来的一只猪。 ”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。 9. 里加 float ，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给 li 不同的属性 会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让你摸不着头脑，由于问题的复杂性，将 另起一文专门讨论该问题。在ul 使用心得一文里有相关成果，却没给出问题解决的过程。 10. img 下的留白。解决方案：给 img 设定 display:block
15、。 11. 失去 line-height。文字，很遗憾，在 ie6 下单行文 字 line-height 效果消失了。 。 。 ，原因是这个 inline-block 元素和 inline 元素写在一起了。解决 方案：让 img 和文字都 float 起来。 12. 链接的 hover 状态。 a:hover imgwidth:300px 我们想让鼠标 hover 时， 链接里包含的图片宽度变 化，可惜在 ie6 下无效，ie7、ff 下有效。 13. 非链接的 hover 状态。div:hover 这样的样式 ie6 是不认的，在 ie7、ff 下才有效果。 14. ie 下 overflo
16、w: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 值，外层绝对层将被撑大。解决方案
