1.position:（层级属性，多层应用）
***fiexd:固定在页面的某个位置（有top,bottom,left,right属性）
如：（悬浮在浏览器的标签）
<div style="width:50px;height:50px;background-color:black;color:red;
position:fixed;bottom:20px;right:20px">返回顶部</div>
如：（悬浮在浏览器顶部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
margin:0 #自动取消页边距，必须放在body才有效果
***relative+absolute:
<div style="position:relative;">
<div style="position:absolute;top:0;left:0;"></div>
</div>
如：（父级与子级标签的位置关系）
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
***多层标签
（z-index属性决定div层级关系，值越大，层级数越高，即越位于最顶层）
（opacity属性的值范围是0-1，越接近0透明度越高）
示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景）
（display:none 属性意味默认是不展示，等应用到按钮使其修改不为none时这两个标签会展示出来）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="display:none;z-index:10; position: fixed;top: 50%;left:50%;
margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; "> <!--margin属性使其整体的div根据位置变换-->
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div style="display:none;z-index:9; position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;background-color: green;">
asdfasdf
</div>
</body>
</html>
2.overflow:（假设标签中的图片大小大于标签原本的宽高，那莪可以增加这个属性使其图片大小不超过标签范围）
hidden值：如果超过了，就隐藏超过的部分
auto值：如果超过了，隐藏超过的部分，但带有滚动条可以查看隐藏的部分
示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
</body>
</html>
3.hover：（当鼠标移动到某位置时，其标签的样式会修改成hover定义中的样式）
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
background-color:blue;
height:48px;
line-height: 48px;
position: fixed; /*窗口悬停*/
top:0; /*取消页边距*/
right:0;
left:0;
}
.pg-body{
margin-top: 50px; /*pg-header标签的height是48px，下个标签起始内容如果不希望被覆盖到，其top值需要设置比它大*/
height:980px
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{ /*此样式使得每个a标签之间有距离，但是和父级之间的上下不存在距离，f12查看*/
display: inline-block;
padding: 0 10px 0 10px; /*分别是top,left,bottom,right*/
color: red;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{ /*hover：使得鼠标移动到相应的位置时，显示该样式*/
background-color: white;
}
/*假设menu下面有多个div*/
.pg-header .menu:hover .b{
background-color:red; /*即当鼠标放到该menu标签时，整个是白色的，但是menu下class为b的标签背景为红色*/
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a>LOGO</a>
<a class="menu">登录</a>
<a class="menu">查找</a>
<a class="menu">日志</a>
</div>
</div>
<div class="pg-body">
<div>这是下一个标签</div>
</div>
</body>
</html>
4.background-image:（背景图）
background-image:url('image/4.gif'); /*如果div大于图片，则图片会自动重复堆叠*/
background-repeat:repeat-y; /*只堆叠Y轴方向*/
background-position-x:10px; /*position属性可以选中图片中的某个部分，比如说一张图片里有很多小图标，可以根据像素大小单独选中,即所谓的抠图*/
background-position-y:10px;
background-position:10px 10px;
5.小图标的引入：
下载font awesome后将整个文件夹放到相应的路径并在需要的网页制作中：
1.引入：<link rel="stylesheet" href="https://zhishitu.com" style="color: #800000;">"font-awesome-4.7.0/css/font-awesome.min.css" />
---实例（输入框中添加小图标）（分层）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;"> <!--position是为了能够分层-->
<input type="text" style="height: 35px;width: 400px;" />
<span style="position:absolute;right:0;top:10px;background-image: url(/i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span> <!--inline-block是为了让行内标签转为块级标签，否则宽高无法应用！-->
</div>
</body>
</html>
知识兔