关于CSS specificity

CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

 在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：

 规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：<div style=”color: red”>sjweb</div>

外部定义指经由<link>或<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.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 ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

  1. 前端页面由哪三层构成，分别是什么？作用是什么？
    网页分成三个层次，即：结构层、表示层、行为层。
    网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
    网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
    网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
  1. css的基本语句构成是？
    选择器{属性1:值1;属性2:值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 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
    9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
    10. img下的留白。解决方案：给img设定 display:block。
    11. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个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，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。
    18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
  3. 如何居中一个浮动元素?
    设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。
    div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
  1. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
    HTML5标签的改变：<header>, <footer>, <dialog>, <aside>, <figure>, <section> 等
    IE9以上开始支持
    CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。
  1. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
  1. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

 

 

.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。

http://www.html5css32.com/index.php/archives/40