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。
升级会员 