css：position、hover、z-index以及常见问题

CSS补充

position

fixed 固定在页面某个位置，不随滚轮滚动

<div style="width:68px;height: 32px;background-color:black;color: white;
    position: fixed;
    bottom:10px;
    right: 10px;
    ">返回顶部</div>

relative+absolute 固定在某个框的某个位置，随着滚轮滚动

<div style='position:relative'>
    <div style='position:absolute;top:0;left:0;'>
    ......
    </div>
</div>

opcity

透明度：0-1（数值越大,透明度越低）

<div style=''></div>

z-index:层级顺序

数值大的在数值小的上层

<div style='top: 110px;
     left: 450px;
     right: 450px;
     background-color:white;
     z-index:10'></div>
 <div style='top: 110px;
     left: 450px;
     right: 450px;
     background-color:white;
     z-index:9'></div>    

hover：

当鼠标移到当前标签，以下CSS样式生效

.pg_feet .menu:hover{
                background-color: lightgrey;
                color: black;
            }

overflow

overflow：hidden --超过尺寸的范围将其隐藏

overflow：auto —超过尺寸范围出现滚动条

background-image:url(‘image/4.gif’)；

#默认，图片重复访问，背景用图片布满,如果小图片就不断重复布满

background-repeat:repeat-y;纵向重复

background-repeat:repeat-x;横向重复

background-repeat:no repeat(不重复)

background-position-x:

background-position-y：

background-position：10px 10px；

常见问题

css样式重复性问题

可以把样式拆分细化，把共同属性现在一个样式里，把独有属性单独写到其它样式里，能极大的避免样式书写的重复性

<style>
    .c{
         共有属性
    }
    .c1{
        独有属性
    }
    .c2{
        独有属性
    }
</style>
<div class='c c1'></div>
<div class='c c2'></div>

自适应和改变大小变形

左右滚动条的出现

宽度，百分比
解决方法：
页面最外层：像素的宽度
最外层设置绝对宽度（小于这个宽度即出现滚动条）

自适应：media标签

默认img标签，有一个1px的边框

因此

img{
     border：0；
}