CSS的优先级和定位

1、 单个选择器的优先级

  标签选择器<  类选择器 < id选择器 <行内样式

 比喻  1             10     100     1000      

例如

2、 多个选择器的优先级

  .nav h3{  }    10+1==11                

  .news ul li {  }  10+1+1=12

  .news .one{  }  10+10=20

  #myid ul li{  }   100+1+1=102

1、固定定位 fixed

1). 固定定位，是相对于浏览器窗口作为定位原点

2).固定定位，不占空间，不随窗口滚动而滚动

3).固定定位的层级要比普通元素高

4). 设置固定定位，变成块元素，无论之前是否是块元素

例如

2、相对定位 relative

1).相对定位 ，相对于“自身左上角” 作为定位原点

2).相对定位，占空间，随着内容一起滚动

3). 相对定位，层级要比普通元素高

4). 相对定位，定位之后，该是什么元素还是什么元素，设置之前是行内，设置后，还是行内

下图是演示效果：

3、绝对定位

1). 绝对定位，相对于祖先定位元素（相对，绝对） 来定位

2).如果一直向上找，找到body,就以body作为定位原点

3). 绝对定位，设置之后都变成块元素

4). 绝对定位，不占空间

5). 绝对定位，层级高于普通元素

6). 代码可以看

效果

4、兼容 ：在不同的浏览器，效果不一致

  Hack 中的bug

 Ie6 只有设置margin之后，给个浮动，变成双边距 margin:10px;

  第一种 在里面加display:inline;

第二种  通过属性

  _属性：属性值；ie6版本一下的能识别

  *属性：属性值; ie7版本一下 都能识别

第三种 值

属性值hack；

  属性：属性值\9;  ie 浏览器可以识别 但 ie11不识别

  属性: 属性值\9\0;  ie9 可以识别