文档流定位

文档定位是一种浏览器默认的定位方式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{
		width: 900px;
		margin: 100px auto;
		border:1px solid blue;
		}
	p,a{display: inline-block;
	width: 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 让隐藏的元素显示出来

来源：https://www.cnblogs.com/niuyaomin/p/11353450.html

标签

文档流

inline