CSS的定位机制用来对页面元素（盒子）进行排版，找到每一个页面元素的位置，确定每一个元素的位置。主要有三种定位方式：
文档流定位，浮动定位和层定位。
1.文档流定位：
是一种默认的情况，不需要额外的设置，每一种元素在当前网页上按次序排列，有些元素独占一行或与其他元素在一行依次显示.
2.浮动定位：
当我们想要让一个大盒子里面的元素并排排列的时候，这个时候就要用到浮动，让元素浮动起来，分别向左向右浮动，达到并排排列的效果。
3.层定位：
当我们希望当前网页的元素能够像图层一样前后层叠在一起有一个叠加的效果，上面的层能够遮盖以下的层。这个时候用层定位。
下面我们详细介绍三种定位方式：
1. 文档流定位
文档流定位是一种默认的情况，不需要额外的设置，每一种元素在当前网页上按次序排列，有些元素独占一行或与其他元素在一行依次显示.注意是从上到下，从左至右依次排列.
文档流的元素分类：block，inline，inline-block
元素类型转化：通过display进行类型转化，display可以取值 none(表示元素不会被显示)，block，inline，inline-block.
1. block类型的元素
元素特点：每个block独占一行，元素的height，width，margin，padding都可以进行设置。
常见的block：< div >,< p >,< h1 >…< h6 >,< ol >,< ul >,< table >,< form >等等.
将其他类型的元素转化成block
a{
display:block;
}
2. inline类型的元素
元素特点：不单独占用一行，width，height不可设置，width就是本身内部包含的文字或图片的宽度，不可改变。
常见的block：< span >,< a >超链接
将其他类型的元素转化成inline
div{
display:inline;
}
inline的间隙问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档流定位</title>
<style type="text/css">
a{
background:#FFB6C1;
}
</style>
</head>
<body>
<a href="#">虚拟超链接Baidu一下</a>
<a href="#">虚拟超链接慕课网</a>
</body>
</html>
两个inline元素水平排列开的时候之间存在着一个间隙，解决：
转化成block类型或者在外面套一层< p >或< ul >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档流定位</title>
<style type="text/css">
a{
background:#FFB6C1;
/*display: block;*/
}
</style>
</head>
<body>
<p><a href="#">虚拟超链接Baidu一下</a></p>
<p><a href="#">虚拟超链接慕课网</a></p>
</body>
</html>
3. inline-block类型的元素
元素特点：
同时具有inline-block类型元素的特点，不单独占用一行，元素的height,width,margin,padding都可以设置,可看做是可以水平排列的block类型元素.
常见的inline-block：图片标签 < img >
将其他类型的元素转化成inline
div{
display:inline-block;
}
简易导航栏的设计：注意其中元素间隙的消除方式（设置父层的font-size=0）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#nav{
width:300px;
margin:100px auto;/*上下边距为100px，水平居中*/
font-size:0;/*在a的父层设置文字大小为0可以消除子层之间的间距*/
}
a{
color: #0000FF;
display: inline-block;
width: 80px;
height: 30px;
font-size:14px;
text-align: center;
line-height: 30px;
text-decoration: none;
border-bottom:1px solid #ccc;
}
a:hover{
color:white;
background: #ccc;
border:1px solid;
border-left-color:orange;
order-top-color:orange;
order-right-color:orange;
}
</style>
</head>
<body>
</body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</html>
