Web前端工程师应该掌握的内容有哪些


一、css的优先级


　  在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。简单说来，CSS是层叠样式表(Cascading Style Sheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。


　　其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。言归正传，开始进入今天的话题。


　　一、什么是CSS优先级?


　　所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。


　　二、CSS优先级规则


　　既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。


　　样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：


　　1、统计选择符中的ID属性个数。


　　2、统计选择符中的CLASS属性个数。


　　3、统计选择符中的HTML标记名个数。


　　最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。


　　例如：


　　1、每个ID选择符(#someid)，加 0,1,0,0。


　　2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。


　　3、每个元素或伪元素(:firstchild)等，加0,0,0,1。


　　4、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。


　　三、特性分类的选择符列表


　　通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0(后面会讲到)。


　　按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。


　　优先级问题其实就是一个冲突解决的问题，当同一个元素(内容)被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。


　　说到这里，我们不得不说一下CSS的继承性。


　　四、CSS的继承性


　　4.1 继承的表现


　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。


　　这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。


　　然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。


　　4.2 继承的局限性


　　继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。


　　有一些属性不能被继承，如：border, margin, padding, background等。


　　五、附加说明


　　1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style& gt;卷标定义的规则。


　　2、有!important声明的规则高于一切。


　　3、如果!important声明冲突，则比较优先权。


　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。


　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。


　　6、关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。


　　还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。


　　优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。


二、js中apply和call方法有什么不同。


　　如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆。


好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.


区分apply,call就一句话,


call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.


相同点:两个方法产生的作用是完全一样的


不同点:方法传递的参数不同


那什么是方法产生的作用,方法传递的参数是什么呢?


我们就上面的foo.call(this, arg1, arg2, arg3)展开分析.


foo是一个方法,this是方法执行时上下文相关对象,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.


在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.


可见,A, B类都有一个message属性(面向对象中所说的成员),A有获取消息的getMessage方法,B有设置消息的setMessage方法,下面来显示call的威力.


　　//创建一个B类实例对象


var b = new B();


//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!


b.setMessage.call(a, "a的消息");


//下面将显示"a的消息"


alert(a.getMessage());


//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的! 


 这就是动态语言 JavaScript call的威力所在!


简直是”无中生有”,对象的方法可以任意指派,而对象本身一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.


所以 b.setMessage.call(a, “a的消息”); 就等于用a作执行时上下文对象调用b对象的setMessage方法,而这过程中与b一点关系都没有, 作用等效于a.setMessage( “a的消息”);


因为apply与call产生的作用是一样的,可以说


call, apply作用就是借用别人的方法来调用,就像调用自己的一样.


好,理解了call, apply相同处—–作用后,再来看看它们的区别,看过上面例子,相信您大概知道了.


从 b.setMessage.call(a, “a的消息”) 等效于 a.setMessage( “a的消息”) 可以看出, “a的消息”在call中作为一个参数传递,


那么在apply中是怎么表示的呢,直接解释说不清楚,apply要结合应用场景才一目了然.我们来设计一个应用场景:


05 //用call方式借用print,参数显式打散传递 


06 print.call(this, a, b, c, d); 


07 //用apply方式借用print, 参数作为一个数组传递, 


08 //这里直接用JavaScript方法内本身有的arguments数组 


09 print.apply(this, arguments); 


10 //或者封装成数组 


11 print.apply(this, [a, b, c, d]); 


12 } 


13 //下面将显示”背光脚本” 


14 example(”背” , “光” , “脚”, “本”); 


在这场景中, example方法内,a, b, c, d作为方法传递的参数, 方法分别运用了apply, call去借print方法来调用,


最后一句由于直接调用example方法, 所以在该方法中的上下文对象this就是window对象.


所以,call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递.所以可以说成


call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.


应用场景:


当参数明确时可用call, 当参数不明确时可用apply给合arguments


1 //例 


2 print.call(window, “背” , “光” , “脚”, “本”); 


3 //foo参数可能为多个 


4 function foo(){ 


5 print.apply(window, arguments); 


6 }


三、如何用js获取网页文件中的div。


本文介绍一下使用js获取div内容，兼容各浏览器。


上面的标签在这几钟基于两种浏览器的内核的浏览器，这几种方法是不兼容的。下面是解决方案


兼容火狐ie的js 获取div的内容 


用来获取浏览器的名称，第一句话的意思就是当获取到的浏览器的名称中带有Explorer。 


涉及项。该整数值指出在 String 对象内开始查找的索引。如果省略，则从字符串的开始处查找。 


indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串，则返回 -1。


四、常见的浏览器有几种？如何来解决浏览器不兼容的问题。（列举10例）。


常见的浏览器：IE  火狐  麦拓  傲游  腾讯TT   Mozilla。


一、 Comments 区别IE和w3c的方法


四、 实现文本自动换行


1. IE中解决方法


word-wrap:break-word;


word-break:break-all;


注：在要换行的内容相应的单元格或者DIV里加入，如：


注：以上脚本放在</head>前面。调用时如下写法：


? 同个页面单处调用：


注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的。


这段JS，如果不是就要输出。


五、 !important


随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)


? 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)


? 水平居中. margin: 0 auto;(当然不是万能)


3. 给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航)


4. FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在IE下 margin加倍等问题.


5. ul 标签在 FF 下面默认有 list-style 和 padding。最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)


6. 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden。以达到高度自适应.


7. 关于手形光标使用 cursor: pointer，而hand 只适用于 IE。



八、 控制网页背景在IE和Firefox中显示不同颜色。


虽然实际网页很少这样制作，但这是体验CSS Hack控制能力的一个简单明了的好例子。


注： 


? IE6可识别*，但无法识别!important 


? IE7可识别*，也可识别!important 


? Firefox无法识别*，但可识别!important 


注： 


? IE6可识别*和下划线”_” 


? IE7可识别*，无法识别下划线”_” 


? Firefox无法识别*或下划线”_” 


九、 控制网页页面宽度。使网页在IE中宽度为400px，在Firefox中宽度为700px 


注： 


? IE可识别”+” 


? Firefox无法识别”+” 


3.控制网页页面高度。使网页在IE6中高度为50px，在IE7或IE6中高度为100px，在Firefox中高度为300px 


注：


? IE6可识别下划线”_”


? IE6和IE7可识别*


? IE7无法识别下划线”_”


? Firefox无法识别”*或下划线”_” 


? IE的if条件Hack 


十、 IE的if条件Hack


可以让IE区别于其它浏览器和IE个版本之间的浏览器，它利用…这样的语法让IE浏览器对其进行解析，属于IE浏览器专有。 

if lte IE 7]> Only IE 7 <![endif]--> 仅IE7可识别


说明 :


? gt:  greater than，选择条件版本以上版本，不包含条件版本


? lt:  less than，选择条件版本以下版本，不包含条件版本


? gte: greater than or equal，选择条件版本以上版本，包含条件版本


? lte : less than or equal，选择条件版本以下版本，包含条件版本


? !: (选择条件版本以外所有版本，无论高低)