WEBBETWAY登录开发工程师面试题

WEBBETWAY登录开发工程师面试题

[HTML && CSS]

1.Doctype? 严厉办法与稠浊办法-怎样触发这两种办法，差异它们有何意义?Doctype声明坐落文档中的最前面的方位，处于标签之前。此标签可奉告阅览器文档运用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，别离表明严厉版别、过渡版别以及依据结构的 HTML 文档。

当阅览器厂商开端创立与规范兼容的阅览器时，他们期望保证向后兼容性。为了完结这一点，他们创立了两种呈现办法：规范办法和稠浊办法（quirks mode）。在规范办法中，阅览器依据规范呈现页面；在稠浊办法中，页面以一种比较宽松的向后兼容的办法显现。稠浊办法一般模仿旧式阅览器（比方Microsoft IE 4和Netscape Navigator 4）的行为以避免老站点无法作业。

阅览器依据DOCTYPE是否存在以及运用的哪种DTD来挑选要运用的呈现办法。假如XHTML文档包括办法完好的DOCTYPE，那么它一般以规范办法呈现。关于HTML 4.01文档，包括严厉DTD的DOCTYPE常常导致页面以规范办法呈现。包括过渡DTD和URI的DOCTYPE也导致页面以规范办法呈现，但是有过渡DTD而没有URI会导致页面以稠浊办法呈现。DOCTYPE不存在或办法不正确会导致HTML和XHTML文档以稠浊办法呈现。

2.行内元素有哪些?块级元素有哪些?CSS的盒模型?

行内元素有：a b span I b em img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

盒模型：margin border padding width

3.CSS引进的办法有哪些? link和@import的差异是?运用 LINK标签将款式规矩写在.css的款式文件中，再以标签引进。

运用@import引进跟link办法很像，但有必要放在… 中


<!–
@import url(css/example.css);
–>

运用STYLE标签将款式规矩写在…标签之中。

<!–
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
–>

运用STYLE特点将STYLE特点直接加在单个的元件标签里，运用符号引进款式cnwebshow.com 

两者差异：加载次序的不同。当一个页面被加载的时分，link引证的CSS会一起被加载，而@import引证的CSS会比及页面悉数被下载完再被加载。@import能够在css中再次引进其他款式表，比方能够创立一个主款式表，在主款式表中再引进其他的款式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

这样做有一个缺陷，会对网站服务器发生过多的HTTP恳求，曾经是一个文件，而现在却是两个或更多文件了，服务器的压力增大，阅览量大的网站仍是慎重运用。


4. CSS挑选符有哪些?哪些特点能够承继?优先级算法怎样核算?内联和important哪个优先级高?l   通配挑选符* { sRules }

l   类型挑选符E { sRules }
td { font-size:14px; width:120px; }

l   特点挑选符
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: red; }
a[rel~="copyright"] { color:black; }

l   包括挑选符E1 E2 { sRules }
table td { font-size:14px; }

l   子目标挑选符E1 > E2 { sRules }
div ul>li p { font-size:14px; }

l   ID挑选符 #ID { sRules }

l   类挑选符E.className { sRules }

l   挑选符分组
E1 , E2 , E3 { sRules }

l   伪类及伪目标挑选符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :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 特性或称特殊性，它是衡量一个衡量CSS值优先级的一个规范，已然作为规范，就具有一套相关的断定规矩及核算办法，specificity用一个四位的数 字串(CSS2是三位)来表明，更像四个等级，值从左到右，左边的最大，一级大于一级，数位之间没有进制，等级之间不可逾越。
 

在多个挑选符运用于同一个元素上那么Specificity值高的终究取得优先级。

挑选符Specificity值列表：


规矩：

1. 行内款式优先级Specificity值为1,0,0,0，高于外部界说。

如：sjweb

外部界说指经由或标签界说的规矩；

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.body div p{color: 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个类挑选符{.sjweb}，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能够改动优先等级为最高，其次是style目标，然后是id > class >tag ，另外在同级款式依照声明的次序后呈现的款式具有高优先级。

5.BETWAY登录页面由哪三层构成，别离是什么?作用是什么?
网页分红三个层次，即：结构层、表明层、行为层。

网页的结构层（structural layer）由 HTML 或 XHTML 之类的符号言语担任创立。标签，也便是那些呈现在尖括号里的单词，对网页内容的语义意义做出了描绘，但这些标签不包括任何关于怎样显现有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表明层（presentation layer） 由 CSS 担任创立。 CSS 对“怎样显现有关内容”的问题做出了答复。
网页的行为层（behavior layer）担任答复“内容应该怎样对事情做出反响”这一问题。这是 Javascript 言语和 DOM 操纵的范畴。6.     css的根本句子构成是?
挑选器{特点1:值1;特点2:值2;……}你做的页面在哪些流览器测验过?这些阅览器的内核别离是什么?常常遇到的阅览器的兼容性有哪些?怎样会呈现?处理办法是什么?
IE内核阅览器：360，傲游，搜狗，国际之窗，腾讯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 。保证全部文字都有默许的 line-height 值。这点很重要，在高度上咱们不能容忍1px 的差异。
3. ff下容器高度限制，即容器界说了height之后，容器边框的外形就确认了，不会被内容撑大，而ie下是会被内容撑大，高度限制失效。所以不要容易给容器界说height。
4. 还评论内容撑破容器问题，横向上的。假如float 容器未界说宽度，ff下内容会尽或许撑开容器宽度，ie下则会优先考虑内容折行。故，内容或许撑破的起浮容器需求界说width。
5. 起浮的铲除，ff下不铲除起浮是不可的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如界说margin-top:14px，将主动生成margin-bottom:14px。padding也会呈现类似问题，都是ie6下的特产，该类bug 呈现的状况较为杂乱，远不只这一种呈现条件，还没体系收拾。处理计划：外层元素设定border 或 设定float。
7. 吞吃现象，限于篇幅，我就不展开了。仍是ie6，上下两个div，上面的div设置布景，却发现下面没有设置布景的div 也有了布景，这便是吞吃现象。对应上面的布景吞吃现象，还有翻滚下边框缺失的现象。处理计划：运用zoom:1。这个zoom好象是专门为处理ie6 bug而生的。
8. 注释也能发生bug~~~“多出来的一只猪。”这是前人总结这个bug运用的案牍，ie6的这个bug 下，咱们会在页面看到猪字呈现两遍，重复的内容量因注释的多少而变。处理计划：用“ picRotate start ”办法写注释。
9. 里加 float ，这是一个典型的，扎手的兼容问题，期望引起咱们正视 ，给li 不同的特点会有不同的解说作用，ff下的解说稍可了解，ie6下的解说会让你摸不着头脑，因为问题的杂乱性，将另起一文专门评论该问题。在《ul运用心得》一文里有相关作用，却没给出问题处理的进程。
10. img下的留白。处理计划：给img设定 display:block。
11. 失掉line-height。文字
，很惋惜，在ie6下单行文字 line-height 作用消失了。。。，原因是这个inline-block元素和inline元素写在一起了。处理计划：让img 和文字都 float起来。
12. 链接的hover状况。a:hover img{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，内有的状况下，position:relative层下的float层内文字无法选中。
18. 总算来了个ff的缺陷。width:100%这个东西在ie里用很便利，会向上逐层查找width值，忽视起浮层的影响，ff下查找至起浮层完毕，如此，只能给中心的全部起浮层加width:100%才行，累啊。opera这点倒学乖了跟了ie。8.     怎样居中一个起浮元素?
设置容器的起浮办法为相对定位，然后确认容器的宽高，比方宽500 高 300 的层，然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}9.     有没有重视HTML5和CSS3?如有请简略说一些您对它们的了解状况！
HTML5标签的改动：, , , , , 等
IE9以上开端支撑
CSS3完结圆角，暗影，对文字加特效，增加了更多的CSS挑选器。10.   假如让你来制造一个访问量很高的大型网站，你会怎样来办理全部CSS文件、JS与图片?11.   你对BETWAY登录界面工程师这个职位是怎样样了解的?它的远景会怎样样? 
 
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

.clearfix:after {clear: both;content: ‘.’;display: block;visibility: hidden;height: 0;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}


.clearfix{*zoom:1;}.clearfix:after{content:’\20′;display:block;height:0;clear:both;}
 

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/* Hides from IE-mac \*/

* html .clearfix{height:1%;}

.clearfix{display:block;}/* End hide from IE-mac */
 

这个clearfix的CSS运用了after这个伪目标，它将在运用clearfix的元素的完毕增加content中的内容。 在这里增加了一个句号”.”，而且把它的display设置成block；高度设为0；clear设为both；visibility设为躲藏。这样就达到了撑开容器的意图。要让IE也完美显现，则有必要在clearfix这个CSS界说的后边加上一些专门为IE设定的HACK。