一、伪类选择器
同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
>:link “链接”：超链接点击之前
>:visited “访问过的”：超链接被访问过之后
（↑只适用于超链接）
>:hover “悬停”：鼠标放到标签上的时候
>:active “激活”： 鼠标点击标签，但是不松手时。
（↑适用于所有元素）
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
color:black;
}
``` 记住，在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
二、css3新增伪类选择器
2.1:first-child 选择器
:first-child 选择器匹配其父元素中的第一个子元素。
/* 列表中的第一个 <li>元素选择的样式： */
li:first-child{
background:yellow;
}
2.2:last-child 选择器
:last-child选择器用来匹配父元素中最后一个子元素。
/* 指定最后一个p元素的背景色： */
p:last-child{
background:#ff0000;
}2.3:nth-child ()选择器
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：
p:nth-child(odd){
background:#ff0000;
}
p:nth-child(even){
background:#0000ff;
}
p:nth-child(3){
background:#00ff00;
}
p:nth-child(4n){
background:#00ffff;
}2.4:first-of-type 选择器
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
/* 选择的 p 元素是其父元素的第一个 p 元素： */
p:first-of-type {
background:#ff0000;
}2.5:last-of-type 选择器
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
/* 指定其父级的最后一个p元素的背景色： */
p:last-of-type{
background:#ff0000;
}2.6:nth-last-child() 选择器
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n可以是一个数字，一个关键字，或者一个公式。
/* 指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色： */
p:nth-last-child(2) {
background:#ff0000;
}2.7:nth-of-type() 选择器
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
/* 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色： */
p:nth-of-type(2){
background:#ff0000;
}
2.8:not() 选择器
:not(selector) 选择器匹配每个元素不是指定的元素/选择器。
/* 为每个并非<p>元素的元素设置背景颜色： */
:not(p){
background:#ff0000;
}三、浮动
3.1.概念
浮动视定了元素往娜个方问浮动（只有左两个方问）。
任何元素都可以浮动，元素浮动后转换为块级元素。
3.2作用
1)图片坏绕
2)布局（块级元素水平显示）
3.3原理
1)浮动元素脱离文档流（元素在页面不占据位置）
2)浮动元素碰到包含框或者浮动元素的边框会停止（浮动元素不会重叠）
3)元素只有左右浮动
4)所有元素都可以浮动，浮动后转换为块级元素
5)块级元素默认宽度变为由内容撑开
6)开启BFC格式，块级格式上下文，变为独立的一块，布局不受子元素和父元素的影响
fLoat.:Left|right/none：3.4清除浮动影响的方法：
1)父元素加高度（高度已知）
2)父元素overfLow:hidden;(自动找高度）
3)受影响的元素加cLear:both;(元素回到正常的位置，父元素的高度没有找)
4)空div法（在浮动元素后加空div,<div cLass="cLear"></div>,cLear{cLear:both;})(空div回到正常位置，父元素高度找到，但是页面新增无语义的空元素)
5)伪对象法
四、 元素定位 position
4.1 作用
定义元素在页面的位置
4.2 属性值
static 默认值 静态定位
relative 相对定位
fixed 固定定位
sticky 粘性定位
absolute 绝对定位
4.3 relative 相对定位
相对于自己原位置定位，定位后原位置保留
配合left、right、top、bottom移动，当四个属性同时存在，left、top生效
当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动
当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动
.box1{
width: 200px;
height: 200px;
background-color: pink;
/* 相对定位，相对于自己原位置定位 */
position: relative;
/* 配合top、bottom、left、right移动 ，当四个属性同时存在，left和top生效*/
top: -50px;
/* left: 50px; */
right: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: plum;
} 
应用场景：
1）配合绝对定位使用
2）自己小范围移动
4.4 fixed 固定定位
相对于浏览器窗口定位，定位后原位置不保留(脱离文档流)
配合left、right、top、bottom移动，当四个属性同时存在，left、top生效
当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动
当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动
<!DOCTYPE html>
<html lang="en">
<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>
body {
height: 3000px;
}
.box1 {
width: 50px;
height: 50px;
background-color: skyblue;
/* 元素固定定位，参照点浏览器窗口 */
position: fixed;
right: 20px;
bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">返回页面顶部</div>
<div class="box2"></div>
</body>
</html>
应用场景：
固定在页面某个位置，例如返回页面顶部等
4.5 sticky 粘性定位
相对于相对定位(参照点为自己的原位置)和固定位(参照点为浏览器窗口)的结合
配合left、right、top、bottom移动，当四个属性同时存在，left、top生效
默认相对定位，当到达临界点，变为固定定位
<!DOCTYPE html>
<html lang="en">
<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>
body{
height: 3000px;
}
.header{
width: 100%;
height: 45px;
background-color: pink;
}
.nav{
width: 100%;
height: 75px;
background-color: paleturquoise;
/* 相对定位和固定定位的结合 */
position: sticky;
/* 默认是相对定位，相对于自己原位置移动0 0，后面变为固定定位，相对于浏览器窗口0 0 */
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
</body>
</html>
4.6 absolute 绝对定位
相对于static以外的第一个父元素定位，如果父元素没有定位，逐级往上找，最后相对于初级包含框定位(视口)
如果需要相对于body定位，body{position:relative;}，绝对定位后原位置不保留(脱离文档流)
配合left、right、top、bottom移动，当四个属性同时存在，left、top生效
当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动
当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动
应用场景：
形成独立的一层
