1.positon：fixed
可以实现网页浏览器上的返回顶部的功能。
positon:fixed 表示将当前div块固定在页面的某一个位置（默认为左上角）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body style="margin:0 auto;"> 8 <div onclick='GoTop();' style="height:50px;50px;background-color: black;color:white; 9 position:fixed; 10 bottom:20px; 11 right:20px; 12 ">返回顶部</div> 13 <div style="height: 5000px;background-color: #dddddd;"> 14 </div> 15 <script> 16 function GoTop(){ 17 document.body.scrollTop=0; 18 } 19 </script> 20 21 </body> 22 </html>
2.positon实现 网页头部在网页上面固定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 height:48px; 9 background-color: black; 10 color:#dddddd; 11 positon:fixed; 12 top:0; 13 left:0; 14 right:0; 15 16 } 17 .pg-body{ 18 height:500px; 19 backgound-color:blue; 20 margin-top:50px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="pg-header">头部内容</div> 26 <div class="pg-body">内容部分</div> 27 28 </body> 29 </html>
3.position:absolute 绝对定位，一锤子买卖；自身的应用场景不多；
当其与relative+absolute一起结合着用，应用场景就会增加；
如下：
在一个div块中，将内部的div块固定在这个div块的某个位置。
<div style="500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;50px;height:50px;background-color: white;border:1px;"></div>
</div>
拓展：
<div style="500px;height:200px;background-color:black;position:relative;margin:0 auto;">
<div style="position:absolute;left:0;bottom:0;50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">笑脸</div>
<div style="position:absolute;left:80px;bottom:0;50px;height:50px;background-color: white;border:1px;line-height: 50px;text-align:center;">哭脸</div>
</div>
解析：
在外层div中设置positon:relative，该div标签是不会发生任何变化的；但是内部的div里面的position:absolute可以指定放在父类标签的固定位置。
实例：用户登陆窗口的输入框右侧放置图片。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height:50px;400px;position:relative;"> 9 <input type="text" style="height:50px;360px;padding-right:40px;"/> 10 <span style="position:absolute;top:8px;right:0; 11 background-image: url(userpic.jpg); 12 height:40px;40px; 13 display:inline-block"></span> 14 </div> 15 </body> 16 </html>
4.opacity透明度，z-index层级顺序；
实例：设计三层的页面，最上层为输入层，第二层为遮罩层（透明度）,第三层为正常页面；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="z-index:10; 9 position:fixed; 10 top:50%; 11 left:50%; 12 background-color: white; 13 50px;height:100px; 14 "> 15 16 <form> 17 用户名：<input type="text" name="用户名" value="admin"/> 18 密码：<input type="password" name="密码" value="admin"/> 19 <input type="submit" name="提交"/> 20 </form> 21 </div> 22 23 <div style="z-index:9; 24 position:fixed; 25 bottom:0; 26 top:0; 27 left:0; 28 right:0; 29 opacity:0.5; 30 background-color: #6e6568; 31 "><br/> 32 <br/>遮罩层</div> 33 <div style="background-color: #c81623;height:5000px;">正文内容</div> 34 35 </body> 36 </html>
解析：z-index属性用来设置div的层级顺序；
opacity属性用来设置透明度，0-1（完全透明-完全不透明）
5.overflow
问题：当img标签内的图片大小超过外层div时，会将div设置的边界冲开，为了避免这个问题可以使用overflow属性设置。（或设置img大小）
overflow:hidden; 如果图片大小超过外层div设置，则隐藏大于部分，仅显示div设置的大小
overflow:auto; 如果图片大小超过外层div设置，则自动出线滚动条可以查看整个图片内容；
1 <div style="height:220px;300px;overflow:hidden"> 2 <img src="1.jpg"/> 3 </div>
6.hover
当鼠标移动到当前标签上时，指定的css属性才会生效；
1 .pg-header .menu:hover{ 2 background-color: red; 3 }
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 position:fixed; 9 right:0; 10 top:0; 11 left:0; 12 height:48px; 13 background-color: #2459a2; 14 line-height:48px; 15 } 16 .pg-body{ 17 margin-top:50px; 18 } 19 .w{ 20 width:980px; 21 margin:0 auto; 22 } 23 .pg-header .menu { 24 display: inline-block; 25 padding:0 10px; 26 } 27 .pg-header .menu:hover{ 28 background-color: red; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="pg-header"> 34 <div class="w"> 35 <a class="logo">logo</a> 36 <a class="all">全部</a> 37 <a class="menu">首页</a> 38 <a class="news">新闻</a> 39 <a class="regarding">关于</a> 40 41 </div> 42 43 </div> 44 <div class="pg-body"> 45 <div class="w">content</div> 46 </div> 47 </body> 48 </html>
7.background-image background-repeat
background-image:url('grey.png') 指定背景图片
background-repeat: no-repeat 指定当背景图片小于div大小时，是否自动堆叠填充；
no-repeat 不堆叠；
repeat-X 水平方向堆叠；
repeat-Y 竖直方向堆叠；
repeat 水平和竖直方向自动堆叠；
space
inherit
round
例:<div style="background-image:url('grey.png');height:5000px; 250px;background-repeat: no-repeat"></div>
应用场景1：图片堆叠：指定的背景图片非常小，要堆满整个大块div，使用这种方法能够实现。
应用场景2：dig.chouti.com的点赞爱心小图片的获取。
1 <div style="background-image:url('chouti.png'); 2 height:20px; 20px; 3 background-repeat:no-repeat; 4 background-position-x:0px; 5 background-position-y:-20px; 6 "></div>
简要写法：
1 <div style="background:url(chouti.png) no-repeat 0 0; 2 20px;height:20px; 3 "></div>
作用：网页上加载这种小logo图示，使用一张图，用backgound-position和div的大小设置，调整在div中显示的图片的指定位置和内容，实现一次请求调用图片资源就可以实现相关的图示的加载。几乎所有的网站都用这种方式实现该功能。