网页制作之html基础学习4-格式与布局
1、position：fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗
例：
1 <head> 2 3 <title>123</title> 4 5 <style type="text/css"> 6 7 #a 8 9 { 10 11 border:5px solid blue; 12 13 width:100px; 14 15 height:100px; 16 17 margin:10px; 18 19 background-color:#0F3; 20 21 left:30px; 22 23 bottom:20px; 24 25 position:fixed; 26 27 } 28 29 </style> 30 31 </head> 32 33 <body> 34 35 <div id="a">a 36 37 </div> 38 39 </body>
显示如下
<!--[endif]-->
2、position：absolute
1）、外层没有position:absolute（或relative）;，那么div相对于浏览器定位，如下图中b（距离浏览器的右边框50像素，距离浏览器的下边框20像素）。
2）、外层有position:absolute（或relative）;，那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框20像素）。
代码：
1 <head> 2 3 <title>123</title> 4 5 6 7 <style type="text/css"> 8 9 .b 10 11 { 12 13 border:5px solid blue; 14 15 width:100px; 16 17 height:100px; 18 19 margin:10px; 20 21 background-color:#0F3; 22 23 right:50px; 24 25 bottom:20px; 26 27 position:absolute; /**/ 28 29 } 30 31 .c 32 33 { 34 35 border:2px solid red; 36 37 width:400px; 38 39 height:200px; 40 41 } 42 43 </style> 44 45 <style type="text/css"> 46 47 .d 48 49 { 50 51 border:2px solid red; 52 53 width:400px; 54 55 height:200px; 56 57 position:absolute; 58 59 } 60 61 </style> 62 63 </head> 64 65 <body> 66 67 <div class="c">c 68 69 <div class="b">b 70 71 </div> 72 73 </div> 74 75 <div class="d">d 76 77 <div class="b">bb 78 79 </div> 80 81 </div> 82 83 </body> 84 85
显示如下：
3、position：relative
相对于默认位置的移动。如下图，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。
代码：
<
1 head> 2 3 <title>123</title> 4 5 <style type="text/css"> 6 7 #a 8 9 { 10 11 border:5px solid blue; 12 13 width:100px; 14 15 height:100px; 16 17 margin:10px; 18 19 background-color:#0F3; 20 21 position:fixed; 22 23 } 24 25 #aa 26 27 { 28 29 border:5px solid blue; 30 31 width:100px; 32 33 height:100px; 34 35 margin:10px; 36 37 background-color:#0F3; 38 39 left:20px; 40 41 top:50px; 42 43 position:relative; 44 45 } 46 47 </style> 48 49 </head> 50 51 <body> 52 53 <div id="a">a 54 55 </div> 56 57 <div id="aa">aa 58 59 </div> 60 61 </body>
显示如下:
4、分层（z-index）
在Z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到aa盖住了a，这是因为后写代码的会盖住前面的，那么在不改变代码顺序的情况下如何让a盖住aa，如下：
1 <head> 2 3 <title>123</title> 4 5 <style type="text/css"> 6 7 .a 8 9 { 10 11 border:5px solid blue; 12 13 width:100px; 14 15 height:100px; 16 17 margin:10px; 18 19 background-color:#0F3; 20 21 position:fixed; 22 23 z-index:2; /*这里做一下修改，默认情况下，都是第1层*/ 24 25 } 26 27 .aa 28 29 { 30 31 border:5px solid blue; 32 33 width:100px; 34 35 height:100px; 36 37 margin:10px; 38 39 background-color:#0F3; 40 41 left:20px; 42 43 top:50px; 44 45 position:relative; 46 47 } 48 49 </style> 50 51 </head> 52 53 <body> 54 55 <div class="a">a 56 57 </div> 58 59 <div class="aa">aa 60 61 </div> 62 63 </body> 64 65 显示如下: 66 67
5、float：left，right
<div style="clear:both"></div> 截断流;
附：
overflow:hidden; /*超出范围时隐藏；scroll，超出范围时出滚动条。*/
超链接样式：
<style type="text/css">
a:link /*一般链接*/
{
color:blue;
}
a:visited /*访问过的链接的格式*/
{
color:green;
}
a:hover /*设置鼠标指向链接时的形式*/
{
color:red;
}
</style>
cursor:pointer 鼠标指到上面时的形状。
© 版权符号©
半透明效果
<div class="box">透明区域</div>
//样式表中代码：
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}
布局的三种方式：
1.自然布局
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
其它的要看实际情况而定。
