布局怎么不脱离文档流_理解标准文档流特点

文章内容输出来源：拉勾教育大前端就业集训营；

大家学习前端的时候是否遇到过以下现象：

在我们遇到的 HTML 元素中，有的标签元素如 <div>、<p> 等在浏览器中加载时必须独自占满一行，有的标签元 素如 <a> 、<span>等则不会独占一行，原因是什么？

这就是标准文档流的特点，接下来给大家解释

1. 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
2. HTML就是一种标准文档流文件。
3. HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

1. 空白折叠现象（不管你打几个空格都会展示一个空格）。
2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3. 自动换行，元素内一行内容写满元素的 width 时会自动进行换行。

<section>        
	<span>有</span><span>无</span>    
</section>    
<section>        
	<span>生</span>           <span>成</span>    
</section>    
<section>        
	<span>有</span>        
	<span>无</span>    
</section>

一个空格一个回车和多空格多个回车都会折叠成一个空格显示在页面上，他折叠的空格是当前父元素的文字字体大小

元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别： 块级元素、行内元素、行内块元素等。

块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。

行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等。

行内块元素：比如 <img>、<input> 等。

各种等级的元素有自己的加载特点。

块级元素

1. 块级元素可以设置宽高，在浏览器中正常加载。
2. 块级元素必须独占一行，不能与其他任何标签并排一行。
3. 块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内 容自动撑开高度。

常见的块级元素有：div,h1-h6,p,pre,ul,ol,li,form,table,label等。

行内元素

1. 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容 易出现加载问题。
2. 行内元素可以与其他的行内或行内块元素并排一行显示。
3. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

常见的行内元素有：a,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。

行内块元素

1. 行内块元素可以设置宽度和高度。
2. 行内块元素可以与其他的行内或行内块并排一行显示。
3. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
4. 行内块依旧具有标准流的微观性质，例如空白折叠现象。

常见的行内块元素有(button,input，textarea,select), img等。

设置浏览器加载模式

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

属性值	作用
block	表示元素要以块级元素模式加载，具备块级特点
inline	表示元素要以行内元素模式加载，具备行内特点
inline­block	表示标签要以行内块模式加载，具备行内块特点
none	表示标签及内部内容直接隐藏，让出原有标准流的位置

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下 加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。