WEB面试题文档格式.docx
《WEB面试题文档格式.docx》由会员分享,可在线阅读,更多相关《WEB面试题文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
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。
一、单项选择题(ccdba)
1.光标移动文本框上方时,文本框边框的颜色就改变,这是因为激发了下列的事件。
A.onFocus
B.onMouseUp
C.onMousrOver
D.onMousMOve
2.下列属性哪一个能够实现层的隐藏?
A.display:
false
B.display:
hidden
C.display:
none
D.display:
"
3.下列选项中,不属于文本属性的是
A.font-sizeB.font-styleC.text-alignD.font-color
4.页面上有一个按钮btn,同时定义好了一个类样式(按钮图片样式表btnPic),那么使用()就可以实现背景图片的改变。
A.onMouseOver="
className=btnPic"
B.onMouseOver="
this.className=btnPic"
C.onMouseOver="
this.style.className=btnPic"
D.this.btn.style.className="
btnPic"
5.下列语句描述正确的是
A.当页面有多个层堆叠时,按照料z-index的数值升序先后排列每个层
B.当页面有多个层堆叠时,按照料z-index的数值降序先后排列每个层
C.设置层的显示属性中inline意味着按块显示,换行显示
D.设置层的显示属性中block意味着的按行显示,和其它元素同一行显示
6.CSS是什么的缩写
A.ComputerStyleSheets
B.CascadingStyleSheets
C.CreativeStyleSheets
D.ColorfulStyleSheets
7.下列HTML引用样式表的方式哪种正确
A.<
stylesheet>
mystyle.css<
/stylesheet>
B.<
stylesrc="
mystyle.css"
C.<
linkrel="
stylesheet"
type="
8.在HTML内部定义样式用下列哪个标签
B.<
css>
C.<
script>
9.下面的CSS语法哪一个正确?
A.body:
color=black
B.{body;
color:
black}
C.body{color:
black}
D.{body:
color=black(body}
10.在CSS中怎样插入注释
A.//thisisacomment//
B.//thisisacomment
C./*thisisacomment*/
D.'
thisisacomment
11.下面哪一个属性用来更换背景颜色
A.background-color:
B.bgcolor:
C.color:
12.怎样给DOM中的所有h1标签增加一个背景色
A.all.h1{background-color:
#FFFFFF}
B.h1{background-color:
C.h1.all{background-color:
13.怎样改变标签元素中文本的颜色
A.text-color=B.fgcolor:
C.text-color:
D.color:
14.下面的CSS属性当中哪一个是控制字体大小的
A.text-sizeB.font-sizeC.text-styleD.font-style
15.下面哪一个是给所有p标签元素字体加粗的语法
pstyle="
text-size:
bold"
B.<
C.p{text-size:
bold}
D.p{font-weight:
16.怎样设置可以使超链接没有下划线
A.a{text-decoration:
nounderline}
B.a{underline:
none}
C.a{decoration:
D.a{text-decoration:
17.怎样使一段文本中的所有单词的首字母大写
A.text-transform:
uppercase
B.text-transform:
capitalize
C.Youcan'
tdothatwithCSS
18.怎样使文本加粗
A.font-weight:
boldB.style:
boldC.font:
b
19.定义边框与内容之间的空隙用padding,请问padding允许用负值对吗?
A.对B.错
20.怎么定义列表的项目符号为实心矩形
A.list-type:
square
B.type:
2
C.type:
D.list-style-type:
二、多项选择题
1.在CSS语言中下列哪些选项是背景图像的属性
A.背景重复B.背景附件C.纵向排列D.背景位置
2.CSS选择器包括
A.超文本标记选择器
B.类选