标准文档流与脱离文档流

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了标准文档流与脱离文档流相关的知识,希望对你有一定的参考价值。

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

标准文档流指在没有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;   固定定位,同样脱离文档流。

以上是关于标准文档流与脱离文档流的主要内容,如果未能解决你的问题,请参考以下文章

position脱离文档流与浮动脱离文档流的区别

浮动脱离文档流与定位脱离文档流的比较~

浮动脱离文档流与定位脱离文档流的比较~

脱离标准文档流---定位

完全理解float之“不完全脱离文档流”

前端学习随笔:float布局问题------float元素是否脱离了文档流