WEB前端开发工程师面试题文档格式.docx
《WEB前端开发工程师面试题文档格式.docx》由会员分享，可在线阅读，更多相关《WEB前端开发工程师面试题文档格式.docx（7页珍藏版）》请在冰豆网上搜索。
块级元素有：
divulollidldtddh1h2h3h4…p
盒模型：
marginborderpaddingwidth
3.CSS引入的方式有哪些?
link和@import的区别是?
1.使用LINK标签
将样式规则写在.css的样式文件中，再以<
link>
标签引入。
<
linkrel=stylesheettype="
text/css"
href="
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.mir
升级会员 