文档定位是一种浏览器默认的定位方式display属性规定元素的类型并可以互相转换！
display:block可以设置元素的height,width,margin,padding。并且可以自带换行符单独占一行。常见的block元素都有<div>,<p>,<h1>,<ol>,<ul>,<form>,<tadle>.
display:inline元素不单独占用一行，width,height不可以设置width就是它包含的文字图片的宽不可以改变，不单独站用一行。常见的inline元素有<span>,<a>。
display:inline-block就是同时具备inline元素和block的特点。不单独站用一行元素的width,margin,padding,height都是可以设置的。常见的display:inline-block元素有<img>
标准文档流
说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
标准流的微观现象：
(1).空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密连接。
<img src="img/00.jpg"/><img src="img/02.jpg"/>
(2)高矮不齐，底边对齐
(3)自动换行，一行写不完时，换行写
标准文档流等级
分为两种等级：块级元素和行内元素；
块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
css的分类和HTML的分类很像，就p不一样
所有的文本级标签都是行内元素，除了p；p是个文本级，但是是个块级元素；
所有的容器级标签都是块级元素
我们用图表示一下：
以下是一个用display：lnline-block属性设置的<p>.<a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0px;
margin: 0px;
font-size: 0px;
}
#nav{
900px;
margin: 100px auto;
border:1px solid blue;
}
p,a{display: inline-block;
200px;
height: 90px;
font-size: 20px;
text-align: center;
line-height: 30px;
text-decoration:none;
border-bottom:10px solid red;
}
</style>
</head>
</div>
<body>
<div id="nav">
<p>昨日一去不复返</p>
<p>昨日一去不复返</p>
<p>昨日一去不复返</p>
<p>昨日一去不复返</p>
<a href="#">光阴似箭</a>
<a href="#">光阴似箭</a>
<a href="#">光阴似箭</a>
</body>
</html>
效果图：
元素可见性的比较：display：none 与 visibility
1、display：none元素不被显示 （在上面有进行介绍过）。
- display：none 隐藏元素，并将其从文档流中完全移除，不保留元素原有的位置，其他的元素会取而代之。
2、visibility属性，控制元素是否可见。
与display：none不同的是 visibility隐藏元素时，元素的内容应该出现的位置会留下一片空白，隐藏元素的空白区域仍然会留在文档中占据位置。
visibility有两个属性：
- visibility：hidden 元素不可见，但在文档中仍然保留位置不会被其他元素占据
- visibility：visible 让隐藏的元素显示出来