一：position:fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗
例如：
<head> <title>网页标题</title> <style type="text/css"> #a { border:5px solid blue; /*设置边框粗细，样式，颜色*/ width:100px; /*设置宽*/ heigth:100px; /*设置高*/ margin:10px; /*设置边距*/ background-color:red; /*设置背景色*/ left:30px; /*距离左侧*/ bottom:20px; /*距离底部*/ position:fixed; /*锁定此位置*/ } </style> </head> <body> <div id="a">练习</div> </body>
二：position:absolute(绝对的)
1）外层没有positon:absolute(或relative),那么div相对于浏览器定位。
2）外层有position：absolute（或relative），那么div相对于外层边框定位。
例如如下代码：
<head> <title>页面标题</title> <style type="text/css"> .b { border:5px solid blue; /*设置边框线样式 颜色*/ width:100px; /*设置宽*/ heigth:100px; /*设置高*/ margin:10px; /*设置边距*/ background-color:red; /*设置背景色*/ right:50px; /*距离右侧*/ bottom:20px; /*距离底部*/ position:absolute; /*设置定位，锁定此位置*/ } .c { border:2px solid red; width:400px; heigth:200px; } </style> <style type="text/css“> .d { border:2px solid red; width:400px; heigth:200px; position:absolute; } </style> </head> <body> <div class="c">c <div class="b">b </div> </div> <div class="d">d <div class="bb">bb </div> <div> </body>
三.position:relative
（相对于把此div包含住的div的某个位置进行固定，如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。）
相对于默认位置的移动。根据如下代码，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。
<head> <title>网页标题</title> <style type="text/css"> #a { border:5px solid red; width:100px; heigth:100px; margin:10px; background-color:#0F3; position:fixed; } #aa { border:5px solid blue; width:100px; heigth:100px; margin:10px; background-color:red; left:20px; top:50px; position:relative; } </style> </head> <body> <div id="a">a </div> <div id="aa">aa <div> </body>
(上述代码中，如果aa不包含在a里面，则a是停留在上层，不随着滚动条滚动，会锁定位置；如果aa包含在a里面，则aa会随着a定位的位置移动）
四.分层（z-index）
在z 轴方向分层，可以理解为凤城一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa盖住了a，这是 因为后写的代码会盖住前面的代码，那么在不改变代码顺序的情况下，如何让a盖住aa呢，代码示例如下：
<head> <title>网页标题</title> <style type="text/css"> .a { border:5px solid red; width:100px; heigth:100px; margin:10px; background-color:blue; position:fixed; z-index:2; /*修改这里，默认情况下的index值是1，也就是都是第一层*/ } .aa { border:5px solid blue; width:100px; heigth:100px; margin:10px; background-color:red; left:20px; top:50px; position:relative; } </style> </head> <body> <div class="a">a </div> <div class="aa">aa </div> </body>
五.float:left、 rigth （float：流式布局流式布局常用值：left、rigth）
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏；scroll，超出范围时出滚动条；
<div style="clear:both"></div> 截断流
<head> <title>网页标题</title> <style type="text/css"> #a { border:5px solid blue; width:100px; heigth:100px; margin:10px; background-color:red; overflow:scroll; float:rigth; } </style> </head> <body> <div id="a">练习hi安居诶安居卡死的房价房价房价房价是打开v网号安居佛得角覅及覅手机覅工会卡少女夏萨</div> </body>
超链接样式：
<style type="text/css"> a:link /*一般链接*/ { color:blue; a:visited /*被访问过的链接的格式*/ { color:green； } a:hover /*设置鼠标指向链接时候的形式*/ { color:red; } </style>
(以上链接，在定义这些状态时有个顺序 l v h a (必须按照这个顺序)，其中a:active：点击超链接时候的状态，可以省略不写，代表点击的时候没有任何状态)
cursor:pointer 表示鼠标指到上面时的形状。这里是小手形状的
半透明效果
<div class="box">透明区域</div> //样式表中的代码： .box { opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
background-color:red;
200px;
heigth:200px; }
opacity:填充效果 -moz-opacity:透明度