CSS中的定位
position：relative、absolute、flxed
定位有三种分类：相对定位、绝对定位、固定定位
相对定位：就是目标定位元素相对自己原来位置的变化，设置相对定位后，元素所占据的空间并没有发生任何改变，只是相对于原来位置发生的位移的变化，其次它仍然还在标准流当中。
绝对定位：设置绝对定位的元素，它的定位基准点永远是元素自己的父亲，如果没有父级元素，那就是以body为基准。
绝对定位有一个口诀：父相子绝——子元素绝对定位、父元素相对定位
固定定位：这个是绝对定位的一种特殊情况。固定定位是以浏览器的窗口做为定位基准点，设置固定定位的元素，就相当于被钉死那了，它不跟随内容的滚动而滚动。
绝对定位与固定定位的区别：绝对定位随网页内容的翻页而翻页，固定定位的位置不随任何翻页而变化。
CSS中的浮动
浮动，其实它就像是一个东西浮在水面上嘛，
float最常用的就布局和文字环绕图片显示。多数情况下float被用来进行搭建一些简单的页面。
但是，浮动的本质：简单来说—实现文字环绕效果。
float通常为两个属性值：左浮动和右浮动
设置浮动需要注意的几个问题：
1.子元素设置浮动，子元素的父元素会存在高度塌陷问题。针对这一问题，通常会在父级元素中添加overflow：hidden来解决。对于像我这要的初学者来说会容易忘记，所以要特别注意。
2.设置浮动的元素会影响其他元素的实现，此时就要用clear这一属性来消除浮动，进而解决问题。
clear：left、right、both、none、inhert
clear有五个属性值，消除左浮动、消除右浮动、左右均消除、继承父级消除属性值
消除float属性后，会自动换行
看一下例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 3px black dashed;
}
.box1{
width: 100px;
height: 100px;
border: 1px black dashed;
float: left;
}
.box2{
width: 100px;
height: 100px;
border: 1px red dashed;
float: left;
}
.box3{
width: 100px;
height: 100px;
border: 1px blue dashed;
float: right;
}
.box p{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">这里是box1</div>
<div class="box2">这里是box2</div>
<div class="box3">这里是box3</div>
<p>
浮动，其实它就像是一个东西浮在水面上嘛，float最常用的就布局和文字环绕图片显示。多数情况下float被用来进行搭建一些简单的页面。
但是，浮动的本质：简单来说—实现文字环绕效果。
float通常为两个属性值：左浮动和右浮动
设置浮动需要注意的几个问题：
1.子元素设置浮动，子元素的父元素会存在高度塌陷问题。针对这一问题，通常会在父级元素中添加overflow：hidden来解决。对于像我这要的初学者来说会容易忘记，所以要特别注意。
2.设置浮动的元素会影响其他元素的实现，此时就要用clear这一属性来消除浮动，进而解决问题。
clear：left、right、both、none、inhert
clear有五个属性值，消除左浮动、消除右浮动、左右均消除、继承父级消除属性值
</p>
</div>
</body>
</html>
给文字消除了左右浮动，大家也可以自己去试试图片的方式。
下面是我做的小案例，为了方便一点，我把案例都放到了一起
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的浮动和定位</title>
<style>
*{
margin: 0;
padding: 0;/*初始化页面*/
}
/*1.第一个盒子的浮动设置*/
.link_float ul{
list-style-type: none;
overflow: hidden;/*子元素使用浮动 副元素会有塌陷问题 解决父元素塌陷问题*/
}
.link_float ul li{
width: 100px;
height: 40px;
background-color: cornflowerblue;
border: 1px azure solid;
float: left;/*左浮动*/
}
.link_float a{
display: block;/*把链接设置成块元素*/
font-size: 20px;
font-weight: bolder;
text-decoration: none;
}
a:link,a:visited{
color: white;
padding-left: 15px;
padding-top: 8px;
/*border: 1px gold solid; 边框调试法*/
}
.link_float li:hover{
background-color: red;
border: 2px crimson solid;
}
/* 2.定位案例CSS代码*/
.big_box{
width: 200px;
height: 200px;
background-color: #528b4a;
border: 1px black dashed;
}
.small_box{
width: 100px;
height: 100px;
background-color: #cd85dc;
border: 1px #dc001a dashed;
position: relative;/*相对定位*/
top: 20px;
left: 20px;
}
.big1_box{
width: 200px;
height: 200px;
background-color: #528b4a;
border: 1px black dashed;
position: relative;
}
.big1_box .small1_box{
width: 20px;
height: 20px;
background-color: #cd85dc;
border: 1px #dc001a dashed;
position: absolute;/*绝对定位1*/
top: 20px;
left: 20px;
}
.big1_box .small2_box{
width: 20px;
height: 20px;
background-color: #4a4edc;
border: 1px #dc001a dashed;
position: absolute;/*绝对定位2*/
top: 40px;
left: 40px;
}
.big1_box .small3_box{
width: 20px;
height: 20px;
background-color: #dc149a;
border: 1px #dc001a dashed;
position: absolute;/*绝对定位3*/
top: 60px;
left: 60px;
}
.only{
width: 50px;
height: 150px;
background-color: darkgray;
position: fixed;
top: 0;
right: 0;
}
.only p{
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
<!--1.浮动-->
<h3>浮动做的小案例</h3><br>
<div class="link_float">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Header</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Footer</a></li>
</ul>
</div>
<br>
<hr><br>
<!--2.定位 定位分为三种：
相对定位：相对的是自己原来的位置，空间还占据着 依然还在标准流当中
绝对定位：父相子绝。是以自己的父级元素为定位点进行的定位，绝对定位之后 相当与没有这个元素了 它脱离了标准流
固定定位：是绝对定位的一种特殊形式。固定定位就是以浏览器的窗口为定位点，简单来说就是经常在网页中见到的小广告
-->
<h3>相对定位的案例</h3><br>
<div class="big_box">
<div class="small_box"></div>
</div>
<h3>绝对定位的案例</h3><br>
<div class="big1_box">
<div class="small1_box"></div>
<div class="small2_box"></div>
<div class="small3_box"></div>
</div>
<br>
<h3>固定定位的案例</h3><br>
<div class="only">
<p>点击<br>查看<br>爆宽</p>
</div>
</body>
</html>第二个图中的方块盒子里，我做了三个绝对定位，为了对比更加鲜明！！
对于浮动的话，我直接就做了一个简单的导航栏了 颜色搭配不好看阿 ，暂时凑合看吧。哈哈哈
这个是固定案例：
今天的就暂时结束咯。下次再接着写过渡与动画哈。
