目录
定位
定位指的就是将指定元素摆放到页面的任意位置,通过定位可以任意摆放元素。
通过position属性来设置元素的定位
可选值:
static,默认值,元素没有开启定位
relative,开启元素的相对定位
absolute,开启元素的绝对定位
fixed,开启元素的固定定位(也是绝对定位的一种)
当开启了元素的定位时,可以通过left、right、top、bottom四个属性来设置元素的偏移量
left,元素相对于其定位位置的左侧偏移量
right,元素相对于其定位位置的右侧偏移量
top,元素相对于其定位位置上边的偏移量
bottom,元素相对于其定位位置下边的偏移量
div{
position:relative;
left:100px; /*向左偏移*/
}
通常偏移量只需要使用两个(一个水平一个垂直)就可以对一个元素进行定位。
相对定位
当元素的position属性设置为relative时,则开启了元素的相对定位。
1、当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化。
2、相对定位是相对于元素在文档流中原来的位置进行定位。
3、相对定位的元素不会脱离文档流(只是显示位置发生了变化,实际位置还在原位置)
4、相对定位会使元素提升一个层次。
5、相对定位不会改变元素的性质,块还是块,内联还是内联。
绝对定位
当position属性值设置为absolute时,则开启了元素的绝对定位。
1、开启绝对定位,会使元素脱离文档流。
2、开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化。
3、绝对定位是相对于最近开启了定位的祖先元素进行定位的。(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口(严格上讲,是根据初始包含块来进行定位,初始包含块是一个视窗大小的矩形)来进行定位。
4、绝对定位会使元素提升一个层级。
5、绝对定位会改变元素的性质:内联元素变成块元素,块元素的宽度和高度默认都被内容撑开。
固定定位
当元素的position属性设置fixed时,则开启了元素的固定定位。(IE6不支持固定定位)
固定定位也是一种绝对定位,大部分特点跟绝对定位一样。
不同点:
1、永远都会相对于浏览器窗口进行定位。
2、固定定位会固定在浏览器窗口的某个位置,不会随滚动条滚动。
元素的层级
如果定位元素的层级是一样的,则下边的元素会盖住上边的。
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级。层级越高越优先显示。
对于没有开启定位的元素不能使用z-index。
父元素的层级再高,也不会盖住子元素
opacity
opacity可以用来设置元素背景的透明,他需要设置一个0~1的值。
0表示完全透明,1表示完全不透明,0.5表示半透明。
opacity属性在IE8及以下的浏览器不支持。
IE8及以下要实现需要使用如下属性代替:
filter:alpha(opacity=透明度);
透明度需要一个0~100的值。
0表示完全透明,100表示完全不透明,50表示半透明。
这种方式支持IE6。
背景
一
background-image
使用background-image来设置背景图片
.box{
background-image:url(xxx.png);
}
如果背景图片大于元素,默认会显示图片的左上角
如果背景图片和元素一样大,则会全部显示
如果背景图片小于元素的大小,则会默认将背景图片平铺以充满元素。
可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色。一般情况下,设置背景图片时都会同时指定一个背景颜色。
background-repeat
通过background-repeat用于设置背景图片的重复方式
可选值:
repeat,默认值,背景图片会双方向重复(平铺)
no-repeat,背景图片不会重复,有多大就显示多大
repeat-x,背景图片沿水平方向重复
repeat-y,背景图片沿垂直方向重复
二
background-position
背景图片默认都是贴着元素的左上角显示。
通过background-position可以调整背景图片在元素中的位置。
可选值:
该属性可以使用top、right、left、bottom、center中的两个值来指定一个背景图片
top left 左上
bottom right 右下
center center 居中
等共九个值
如果只给出一个值,则第二个默认是center
也可以直接指定两个偏移量
第一个是水平偏移量
如果指定的是一个正值,则图片向右移动指定的像素
如果指定的是一个负值,则图片向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值,则图片向下移动指定的像素
如果指定的是一个负值,则图片向上移动指定的像素
.box{
background-image:url(xxx.png);
background-position: 100px 0px; /*图片水平向左偏移100像素*/
}
background-attachment
通过background-attachment设置背景图片是否随页面一起滚动。
可选值:
scroll,默认值,背景图片随着窗口滚动
fixed,背景图片会固定在某一位置,不随页面滚动
当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口。
不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素。如果设置给其他元素,当该元素不在窗口时,该固定图片也会随之消失。
简写属性
通过background属性可以同时设置所有背景相关的样式。
没有顺序要求,也没有数量要求,不写的样式就使用默认值
按钮
.btn{
display:block;
width:93px;
height:29px;
background-image:url(xxx.png);
background-repeat:no-repeat;
}
.btn:hover{
background-image:url(hover.png);
}
.btn:active{
background-image:url(active.png);
}
注意:
做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁。这个闪烁会造成一次不佳的用户体验。
产生问题的原因:背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求。我们外部资源并不是同时加载的,浏览器会在资源被使用才去加载资源。由于加载图片需要一定的时间,所以在加载和显示过程会有一段时间,背景图片无法显示,导致出现闪烁。
解决方法:
.btn{
display:block;
width:93px;
height:29px;
background-image:url(btn.png);
background-repeat:no-repeat;
}
.btn:hover{
background-image:url(btn.png);
background-position:-93px 0px;
}
.btn:active{
background-image:url(btn.png);
background-position:-186px 0px;
}
为了解决该问题,我们可以将三个图片整合为一个图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题。然后再通过background-position来切换要显示图片的位置,这种技术叫做图片整合技术(CSS-Sprite)
优点:
1、将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提 高访问效率。
2、将多个图片整合为一张图,减小了图片的总大小,提高请求的速度