标准文档流与脱离文档流

Posted 2020-10-05

在网页当中，所有的元素都有自己的占位。

标准文档流指在没有CSS干预的前提下，块级元素独占一行，可以自行定义宽、高；而行内元素并排显示，宽、高为auto。

常见的块级元素有：

<address>地址
<caption>表格表格标题
<div>划分区域、区块
<dl>定义列表
<dt>定义列表中的项
<dd>列表中定义条目
<form>创建一个表单
<h>标题标记
<hr>一条横线
<li>定义列表项目
<ol>有序列表
<ul>无序列表
<p>定义段落
<table>html表格
<thead>表格的表头部分
<tbody>表格的主体部分 
<tfoot>表格的页脚（脚注或表注）
<th>表头单元格 
<tr>表格中的行

常见的行内元素有：

<a>标签定义锚
<abbr>表示一个缩写形式
<em>标记，斜体显示，着重语气
<i>标记，单纯斜体显示
<b>标记，字体加粗
<br>强制换行
<cite>除了能表示斜体，还能将其标识为引用的作品
<img>向网页中加入图像
<input>输入框
<lable>标签为...
<q>小段、短的引用
<select>创建多选菜单
<small>呈现小号字体
<span>组合文档内的行内元素
<strong>标记，字体加粗，着重语气
<sub>下标
<sup>上标 
<td>标准单元格
<textarea>多行文本框 
<acronym>定义只能首字母缩写
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<code>定义计算机代码文本
<dfn>定义一个项目
<kbd>定义键盘文本

 

而脱离文档流除了上周所写的浮动以外，通过定位的方式也会使元素脱离文档流。

定位的几条代码：

position:static;   默认位置

position:relative;   相对定位：相对于自己本来的位置

值为：top:XXpx;

　　　left:XXpx;    等

positionabsolute;   绝对定位：对于html页面原点（0,0点），会脱离文档流

在父级设置position:relative;然后在自己中设置position:absolute;和属性值可以控制自己在父级内部，非静态定位

（以离它最近且包含它的容器来定位）

position:fixed;   固定定位，同样脱离文档流。