CSS的优先级和定位

 时间:2026-02-15 19:07:52

1、1. 单个选择器的优先级

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

 比喻  1             10     100     1000      

例如

CSS的优先级和定位

2、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

CSS的优先级和定位

1、1.固定定位 fixed

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

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

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

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

例如

CSS的优先级和定位

2、2.相对定位 relative

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

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

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

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

下图是演示效果:

CSS的优先级和定位

3、3.绝对定位

1). 绝对定位,相对于祖先定位元素(相对,绝对) 来定位

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

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

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

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

6). 代码可以看

效果

CSS的优先级和定位

4、兼容 :在不同的浏览器,效果不一致

  Hack 中的bug

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

  第一种 在里面加display:inline;

第二种  通过属性

  _属性:属性值;ie6版本一下的能识别

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

第三种 值

属性值hack;

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

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

  • html页面中如何把a标签改为js跳转
  • css如何去除div内所有文字的加粗样式
  • jquery如何累加input的value值
  • 如何用js实现点击按钮随机改变网页的颜色
  • JavaScript的arguments是什么
  • 热门搜索
    世界知识产权日手抄报 传染病手抄报内容 汉字王国手抄报 关于感恩手抄报内容 小学生环保手抄报资料 关于安全的手抄报资料 我爱读书手抄报花边 感念师恩手抄报 小学三年级手抄报大全 读书手抄报名人名言