标准文档流与脱离文档流

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

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

时间: 2024-10-14 16:09:22

标准文档流与脱离文档流的相关文章

HTML文档流和脱离文档流

文档流:也就是我们通常看到的由左到右.由上而下的元素排列形式,在网页中每个元素都是默认按照这个顺序进行排序和显示的. 脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方).脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间. 脱离文档流的几种方法: 1.绝对定位 2.固定定位 3.浮动 原文地址:https://www.cnblogs.com/fantianlong/p/99

常规流和脱离文档流

常规流 又叫做文档流:在没有CSS的干预下,块级元素独占一行,宽高可设:行内元素并排显示,宽高自动. 脱离文档流 又叫做浮动流:元素在进行浮动后就是脱离文档流: 注意:浮动流在进行摆放的时候要避开常规流: 常规流在进行摆放时无视浮动流: 子级元素浮动后导致父级高度坍塌: 清除浮动 书写格式:fixed:after { content: " "; display: block; clear: both;} 属性 值 说明 clear none 默认   left 清除左浮动,元素在左浮动

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

以前我觉得position:absolute;是可以脱离文档流的,float:left;也可以脱离文档流,就觉得二者是一样的,感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题,结果证明我错了...下边是一个demo. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 &l

css脱离文档流

Q:什么是文档流? A:简单的说可以理解为元素在页面上出现的先后顺序. Q:什么情况下会脱离文档流? A:当使用“浮动”与“绝对定位”时. Q:脱离文档流就不占据空间了吗? A:可以这么说.更准确地一点说,是一个元素脱离文档流之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离? A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里. 需要注意的是,使用float脱离文档流时,其他盒子

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g

DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

CSS中脱离文档流是什么意思?

如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中的父节点? 脱离文档流只是对html文档的一种解析方案的说法而已.脱离文档流是相对正常文档流而言的.正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序.比如写了5个div块.正常文档流就是依次显示这5个div块.从左往右,自上而下的顺序.脱离文档流就是指它

css之float之非完全脱离文档流

非完全脱离文档流  左右结构div盒子重叠现象,一般是由于相邻两个DIV一个使用浮动一个没有使用浮动.一个使用浮动一个没有导致DIV不是在同个"平面"上,但内容不会造成覆盖现象,只有DIV形成覆盖现象. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s