1.定位
| CSS 属性名 | 功能 | 属性值 |
| position | 设置定位 | static：不定位，默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位 |
| left | 与参照点左侧距离 | 长度 |
| right | 与参照点右侧距离 | 长度 |
| top | 与参照点上侧距离 | 长度 |
| bottom | 与参照点下侧距离 | 长度 |
| z-index | 显示层级 | 纯数字 |
1.1相对定位
1.1.1如何设置相对定位
position: relative
1.1.2相对定位元素定位的参考点
自己原来的位置
1.1.3相对定位元素的特点
不脱离文档流，相邻元素仍然按照其原来的位置进行排列
相对定位不会改变元素原有的显示模式，可以与浮动一起设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
position: relative;
}
body{
position: relative;
}
.wapper{
width: 600px;
height: 400px;
background: #999;
}
.box1{
width: 200px;
height: 100px;
background: blue;
}
.box2{
position: relative;
width: 200px;
height: 100px;
background: red;
}
.box3{
width: 200px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="wapper">
<div class="box1">元素一</div>
<div class="box2">元素二</div>
<div class="box3">元素三</div>
</div>
</body>
</html>
1.2绝对定位
1.2.1设置绝对定位
position：absolute;
1.2.2绝对定位元素定位的参考点
1. 绝对定位元素参照它的包含块进行定位
2. 一般元素的包含块就是父元素，绝对定位元素的包含块是第一个定位的祖先元素（从父元素开始向上找），如果没有定位的祖先元素，包含块就是整个页面
1.2.3绝对定位元素的特点
1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置为绝对定位就是绝对定位元素； 同时设置浮动和绝对定位，浮动不生效。
3. 绝对定位元素具有自己的显示特点
① 默认宽高都是被内容撑开，不存在外边距的塌陷和合并
② 宽高内外边距都可以设置
③ 不会被父元素作为文本
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 800px;
padding: 20px;
background: #ccc;
}
.box {
/* float: left; */
width: 200px;
height: 150px;
padding: 10px;
color: #fff;
}
.box01 {
background: #900;
}
.box02 {
/* 设置成相对定位 */
position: relative;
/* 定位元素 可以使用 left\right\top\bottom 调整位置 */
/* left: 100px;
top: 100px; */
/* left: -20px;
top: -20px; */
/* left: 100px;
right: 30px;
right: -30px;
bottom: -20px;
bottom: 20px; */
/* margin-left: 100px;
margin-top: -100px; */
top: -100px;
background: #080;
}
.box03 {
background: #099;
}
.boxs {
margin-top: 60px;
}
.item {
float: left;
margin-right: 20px;
margin-bottom: 20px;
width:250px;
height: 300px;
padding: 20px;
background: #ccc;
}
.item:hover {
position: relative;
top: -2px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box01">元素A</div>
<div class="box box02">元素B</div>
<div class="box box03">元素C</div>
</div>
<div class="boxs">
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
<div class="item">商品项目</div>
</div>
</body>
</html>1.3固定定位
1.3.1如何设置为固定定位
position: fixed;
1.3.2固定定位的元素定位参考点
1. 固定定位元素参照它的包含块进行定位
2. 固定定位元素的包含块是视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wapper {
/* position: relative; */
width: 800px;
padding: 20px;
border: 4px dashed #999;
background: #ccc;
text-align: center;
}
.box {
/* float: left; */
width: 200px;
height: 150px;
padding: 10px;
color: #fff;
}
.box01 {
background: #900;
}
.box02 {
/* 设置成固定定位 */
position: fixed;
right: 10px;
top: 100px;
background: #080;
}
.box03 {
background: #099;
}
</style>
</head>
<body>
<div class="wapper">
<div class="box01">元素一</div>
<div class="box02">元素二</div>
<div class="box03">元素三</div>
</div>
<div style="height:1000px"></div>
</body>
</html>1.3.3固定定位元素的特点（同绝对定位）
1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置为固定定位就是固定定位元素； 同时设置浮动和固定定位，浮动不生效。
3. 固定定位元素具有自己的显示特点
① 默认宽高都是被内容撑开，不存在外边距的塌陷和合并
② 宽高内外边距都可以设置
③ 不会被父元素作为文本
1.3.4定位显示层级 z-index
1. 定位的元素默认显示层级是相同的，不论进行哪一种定位，后面的元素显示在上层； 定位元素的显示层级比不定位高。
2. 定位的可以通过 CSS 属性 z-index 设置显示层级，值是数字，可以是负值，值越大显示层级越高； 不定位的元素设置 z-index 无效！
1.4定位元素（绝对和固定）的默认宽高计算规则
1. 定位的元素，如果没有固定宽度，同时 left 和 right 都会生效，进而影响到默认的宽度
2. 定位的元素，如果没有固定高度，同时 top 和 bottom 都会生效，进而影响到默认的高度
原始的样式
设置 left和right
.box01 {
background: #900;
position: absolute;
left: 0;
right: 0;
left: 100px;
right: 20px;
top: 0;
bottom: 0;
/* width: 200px; */
}
设置固定宽度
.box01 {
background: #900;
position: absolute;
left: 0;
right: 0;
left: 100px;
right: 20px;
top: 0;
bottom: 0;
width: 200px;
}
固定定位
.box02 {
position: fixed;
left: 0;
right: 0;
top: 200px;
bottom: 200px;
background: #080;
}
1.4设置定位元素（绝对和固定）在包含块中水平垂直都居中
1.4.1方案一：
position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度/2;
margin-top:-自身总高度/2;
设置居中
.box {
position: fixed;
left: 50%;
top: 50%;
margin-left: -220px;
margin-top: -120px;
width: 400px;
height: 200px;
padding: 20px;
color: #fff;
background: #900;
}
1.4.2方案二：
position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2.精灵图
把小的图片合并到一张大的图片上
多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同
2.1精灵图的优点
减少图片的请求次数，提高网页加载速度。
2.2制作精灵图在线工具
https://alloyteam.github.io/gopng/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
width: 120px;
height: 56px;
background: url(./images/toolbars.png) -100px 0;
}
.b2{
width: 120px;
height: 56px;
background: url(./images/toolbars.png) top right;
}
.b3{
width: 18px;
height: 20px;
background: url(./images/toolbars.png) -97px -212px;
}
</style>
</head>
<body>
<h1>精灵图</h1>
<button class="b1"></button>
<button class="b2"></button>
<button class="b3"></button>
</body>
</html> 
3.重置样式表
由于很多的元素有自己默认的样式，一般在使用时会将默认样式去掉，自己设计样式
1. reset.css 将元素自带的样式重置掉
2. normalize.css 重新设置了元素自带的样式，保持各浏览器统一，需要设计稿也使用normalize标准
