定位:
定位是指将元素摆放到页面的任意位置,通过定位可以任意的摆放元素。
通过position属性来设置元素的定位.
可选值:
1. static:默认值,没有开启元素的定位。
2. relative:开启元素的相对定位。
3. absolute:开启元素的绝对定位。
4. fixed:开启元素的固定定位(也是绝对定位的一种)。
当开启了元素的定位(position属性值是一个非static的值)时,可以通过left,right,top,bottom四个属性来设置元素的偏移量。
- left:元素相对于其定位位置的左侧偏移量。
- right:元素相对于其定位位置的右侧偏移量。
- top:元素相对于其定位位置的上边偏移量。
- bottom:元素相对于其定位位置的下边偏移量。
相对定位relative的特点:
- 当开启元素的相对定位以后,二不设置偏移量时,元素不会发生任何变化。
- 相对定位是相对于元素在文档流中原来的位置(没有开启定位时的位置)进行定位。
- 相对定位的元素不会脱离文档流。
- 相对定位会使得元素提升一个层级。
- 相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素。
**绝对定位的特点:**
- 会使得元素脱离文档流。
- 如果不设置偏移量,元素的位置不会发生改变。
- 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的(一般情况下,子元素开启了绝对定位都会开启父元素的相对定位)。如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位。
- 绝对定位会社得元素提升一个层级。
- 绝对定位会改变元素的性质;内联元素变成块元素;块元素的宽度和高度默认都被内容撑开。
固定定位的特点:
固定定位大部分特点和绝对定位一样。
不同的是:
- 固定定位永远都会相对于浏览器窗口进行定位。固定定位会固定在浏览器窗口的某个位置,不会随着滚动条滚动(就像打开网页一直出现在窗口中的广告)。
- IE6不支持固定定位。
元素的层级特点:
如果定位元素的层级是一样的,则下边的元素会盖住上边的元素。
通过z-index属性可以用来设置元素的层级。
可以为z-index指定一个正整数作为值,盖值将会作为当前元素的层级。层级越高,越优先显示。
列:z-index : 10
但是注意:父元素的层级再高也不会盖住子元素。
对于没有开启定位的元素,不能使用z-index。
设置元素的透明背景:
opacity可以用来设置元素背景的透明,用0~1之间的值来表示透明度。0表示完全透明,1表示不透明。
列:opacity: 0.5
opacity属性在IE8及以下的浏览器不支持;需要使用如下属性来代替:
alpha(opacity = 透明度)
透明度用0~100之间的值来表示。这种方式支持IE6,但是这种方式在IE Tester中无效。
背景图片设置:
- 使用backround-image来设置背景图片。
语法:
background-image:url(相对路径)
- 如果背景图片大于元素,默认会显示图片的左上角。
- 如果背景图片和元素一样大,则会将背景图片全部显示。
- 如果背景图片小于元素大小,则会将背景图片平铺以充满元素。
- 背景图片会覆盖背景颜色。
设置背景图片的重复方式:
background-repeat用来设置背景图片的重复方式。
可选值:
- repeat:默认值,背景图片会双方向重复(平铺)。
- no-repeat:不重复,有多大就显示多大。
- repeat-x:背景图片水平方向重复。
- repeat-y:背景图片垂直方向重复。
设置背景图片在元素中的位置:
通过background-position可以设置背景图片在元素中的位置。
可选值:使用top,right,left,bottom,center中的两个值来指定图片的位置。
例如:top left
表示左上
如果只给出一个值,第二个值默认是center。
也可以通过设置两个偏移量来指定位置:
第一个值表示水平偏移量
第二个值表示垂直偏移量
例如:
backrround-position:100xp, 50xp;
background-attachment用来设置背景图片是否跟随页面一起滚动。
可选值:
- scroll: 默认值,背景图片跟随页面滚动。
- fixed:背景图片固定在一位置,不跟随滚动。如果设置给body,图片会一直显示在窗口中。图片的定位会一直相对于窗口。
图片整合技术(CSS-sprite):
在同一个位置切换多个图片时会出现的短暂空白问题从而导致闪烁。解决这个问题可以将多个图片整合为一张图片,就不会出现闪烁的问题了。这种技术叫图片整合技术。一张包含多个图片的图片称为雪碧图。
技术的优点:
- 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片(准确的说是一张图片里包含多张图片)。提高访问效率,提高了用户体验。
- 将多个图片整合为一张图片,减小了图片的总大小。
background简写属性:
通过该属性可以同时设置所有背景相关的样式;没有顺序要求,也没有数量要求。
例如:
backfround : #bfa url(相对路径) center center no-repeat fixed;