CSS初涉（2）

标签的一些常用属性

---

position属性：
设置标签的位置，有一下三种赋值：
- fixed：表示固定在页面的某个位置，在滚动页面时不会随着页面移动。一般会配合top、right、left、button等相对页面位置属性设置使用，已确定标签固定的位置。

此时用注意此标签会遮住底层内容，在顶部设置是要注意将底层的div设置底层的margin-top值，这个时候margin居中方式失效，需要用百分比，默认以左上角对齐，可再用margin-left等值移动。这一般会在弹窗的时候移动。
- absolute：也是固定在某个位置，但与position相比，是相对的，固定在页面的某个位置会随之页面滚动而移动，一般与relative配合使用。
- relative：相对位置，position所在的标签与relative所在的标签配合，固定在relative所在标签的某个固定位置。

opacity：设置标签的透明度（0-1）
z-index:设置标签的层次，层数越大，这一块会放在上层
overflow：图片的设置，hidden表示显示div当前大小，auto表示表示图片大小不适合div时出现滚动条显示图片。

hover：当鼠标移动到当前标签是，标注的CSS属性才会生效。例如：.cs1:hover{**}。此时，cs1中设置的CSS属性修饰的标签只会在鼠标移植标签上时才会生效。

例：弹窗叠层

<div style="background-color: deeppink;width: 800px;height:1000px;margin: 0 auto;z-index: 1">content</div><div style="background-color:grey;position: fixed;opacity: 0.5;top:0;bottom: 0;right: 0;left: 0;z-index: 2">111</div><div style="position: fixed;height: 200px;width: 300px;background-color: white;z-index: 3;top: 50%;left:50%;margin-left: -200px;margin-top: -150px">v</div>

background：背景设置
- background-image:url(图片地址)–默认div大时图片重复访问
- background-repeat：图片重复repeat-x,repeat-y可设置x,y方向是否重复
- background-position-x,background-position-y:
- background直接设置与背景有关的属性。

例：登录框

<div style="height:40px;width: 400px;position: relative">    <label><input type="text" style="height: 35px;width: 370px;padding-right: 30px"></label>    <span style="position: absolute;right: 6px;top:10px;background-image:url(1.png);    height:30px;width:24px;display:inline-block;"></span></div>

效果：