WEB前端开发工程师面试题Word文档下载推荐.docx

WEB前端开发工程师面试题Word文档下载推荐.docx

《WEB前端开发工程师面试题Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《WEB前端开发工程师面试题Word文档下载推荐.docx（7页珍藏版）》请在冰豆网上搜索。

example.css"

>

2.使用@import引入

跟link方法很像，但必须放在<

STYLE>

...<

/STYLE>

中

STYLETYPE="

!

--

　　@importurl（css/example.css）;

-->

3.使用STYLE标签

将样式规则写在<

标签之中。

body{color:

#666;

background:

#f0f0f0;

font-size:

12px;

}

td,p{color:

#c00;

4.使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<

元件（标签）STYLE="

性质（属性）1:

设定值1;

性质（属性）2:

设定值2;

...}

5.使用<

span>

/span>

标记引入样式

spanstyle="

font:

12px/20px#000000;

"

两者区别：

加载顺序的差别。

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

———————-

@import“sub1.css”;

@import“sub2.css”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

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}

h[title]{color:

blue;

}/*所有具有title属性的h对象*/

span[class=demo]{color:

red;

div[speed="

fast"

][dorun="

no"

]{color:

a[rel~="

copyright"

black;

●包含选择符E1E2{sRules}

tabletd{font-size:

●子对象选择符E1>

E2{sRules}

divul>

lip{font-size:

●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:

lang]

Pseudo-Elements{sRules}

（Pseudo-Elements）[:

first-letter:

first-line:

before:

after]

可以继承的有：

font-sizefont-familycolor

不可继承的一般有：

borderpaddingmarginbackground-colorwidthheight等

============================

关于CSSspecificity

CSS的specificity特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：

规则：

1.行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：

divstyle=”color:

red”>

sjweb<

/div>

外部定义指经由<

或<

style>

标签定义的规则；

2.!

important声明的Specificity值最高；

3.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}，Specificity值为0,0,0,1

2.bodydivp{color:

green;

3个元素{bodydivp}，Specificity值为0,0,0,3

3.div.sjweb{font-size:

1个元素{div}，Specificity值为0,0,0,1

1个类选择符{.sjweb}，Specificity值为0,0,1,0

最终：

Specificity值为0,0,1,1

4.Div#sjweb{font-size:

1个类选择符{.sjweb}，Specificity值为0,1,0,0

Specificity值为0,1,0,1

5.html>

bodydiv[id=”totals”]ulli>

p{color:

red;

6个元素{htmlbodydivullip}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可以改变优先级别为最高，其次是style对象，然后是id>

class>

tag，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

5.前端页面由哪三层构成，分别是什么？

作用是什么？

网页分成三个层次，即：

结构层、表示层、行为层。

网页的结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。

标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。

例如，P标签表达了这样一种语义：

“这是一个文本段。

”

网页的表示层（presentationlayer）由CSS负责创建。

CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。

这是Javascript语言和DOM主宰的领域。

6.css的基本语句构成是？

选择器{属性1:

值1;

属性2:

值2;

……}

7.你做的页面在哪些流览器测试过？

这些浏览器的内核分别是什么?

经常遇到的浏览器的兼容性有哪些？

怎么会出现？

解决方法是什么？

IE内核浏览器：

360，傲游，搜狗，世界之窗，腾讯TT

非IE内核浏览器：

firefoxoperasafarichrome

1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:

inline;

加到css里面去。

2.文字本身的大小不兼容。

同样是font-size:

14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。

解决方案：

给文字设定line-height。

确保所有文字都有默认的line-height值。

这点很重要，在高度上我们不能容忍1px的差异。

3.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。

所以不要轻易给容器定义height。

4.还讨论内容撑破容器问题，横向上的。

如果float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。

故，内容可能撑破的浮动容器需要定义width。

5.浮动的清除，ff下不清除浮动是不行的。

6.mirrormarginbug，当外层元素内有float元素时，外层元素如定义margin-top:

14px，将自动生成margin-bottom:

14px。

padding也会出现类似问题，都是ie6下的特产，该类bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。

外层元素设定border或设定float。

7.吞吃现象，限于篇幅，我就不展开了。

还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div也有了背景，这就是吞吃现象。

对应上面的背景吞吃现象，还有滚动下边框缺失的现象。

使用zoom:

1。

这个zoom好象是专门为解决ie6bug而生的。

8.注释也能产生bug~~~“多出来的一只猪。

”这是前人总结这个bug使用的文案，ie6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。

用“<

–[if!

IE]>

picRotatestart<

[endif]–>

”方法写注释。

9.<

li/>

里加float<

div/>

，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。

在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。

10.img下的留白。

给img设定display:

block。

11.失去line-height。

divstyle=”line-height:

20px”>

img/>

文字<

，很遗憾，在ie6下单行文字line-height效果消失了。

。

，原因是<

这个inline-block元素和inline元素写在一起了。

让img和文字都float起来。

12.链接的hover状态。

a:

hoverimg{width:

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-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，<

head>

/head>

内有<

basetarget=”_blank”/>

的情况下，position:

relative层下的float层内文字无法选中。

18.终于来了个ff的缺点。

width:

100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:

100%才行，累啊。

opera这点倒学乖了跟了ie。

8.如何居中一个浮动元素?

设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500高300的层，然后设置层的外边距。

div{Width:

500px;

height:

300px;

Margin:

-150px00-250px;

position:

relative;

left:

50%;

top:

9.有没有关注HTML5和CSS3?

如有请简单说一些您对它们的了解情况！

HTML5标签的改变：

header>

<

footer>

dialog>

aside>

figure>

section>

等

IE9以上开始支持

CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。

10.如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

11.你对前端界面工程师这个职位是怎么样理解的？

它的前景会怎么样？

.clear{clear:

both;

display:

block;

overflow:

hidden;

visibility:

0;

.clearfix:

after{clear:

content:

'

.'

;

.clearfix{display:

inline-block;

*html.clearfix{height:

1%;

.clearfix{*zoom:

1;

}.clearfix:

after{content:

'

\20'

block;

0;

clear:

both;

."

hidden;

.clearfix{display:

inline-block;

}/*HidesfromIE-mac\*/

*html.clearfix{height:

1%;

}/*EndhidefromIE-mac*/

这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。

在这里添加了一个句号"

，并且把它的display设置成block；

高度设为0；

clear设为both；

visibility设为隐藏。

这样就达到了撑开容器的目的。

要让IE也完美显示，则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。