当前位置：网站首页技术文章网络编程正文

html5 文档流什么意思

时间：2022-06-03 [网络编程]作者：fabuyuan 浏览：6 次

html5中，文档流又称“普通流”，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式；并且最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。脱离文档流的方法：1、float浮动；2、position定位。
推荐阅读：
关于本站
联系我们
共享充电宝2.0系统源码下载_仿云海广告云点机器人挂机赚qian
最新最美微星搭建教程下载_简单介绍_主要介绍修改手端

本教程操作环境：windows7系统、HTML5版、DELL G3电脑

一、什么是文档流？

“流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。

那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。

当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。

二、块级元素与行内元素

块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。

结合以上内容，块级元素拥有以下特点：

每个块级元素都是独自占一行。
元素的高度、宽度、行高和边距都是可以设置的。　　
元素的宽度如果不设置的话，默认为父元素的宽度。

行内元素：显然，这种元素存在于一行内，且能与别的行内元素共同享有一行。常见的行内元素有：span、input、a、em、strong、b、br、img、select、button等。

那么行内元素拥有的特点如下：

每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
行内元素设置width, height无效（此处有坑，请往下看），宽度随元素的内容而变化。
行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

三、替换元素和非替换元素

细心的大家肯定发现了，像<img>、<input>、<select>、<textarea>等，它们也是行内元素呀，明明就可以设置宽高啊，那这里就有问题了。其实并不是所有的行内元素都不能设置宽高的。

行内元素也分为两种：替换元素和非替换元素。

替换元素：

浏览器根据元素的标签和属性，来决定其的具体显示内容的元素，常见的有：<img>、<input>、<select>、<textarea>、<object>。比如浏览器根据<img >标签的src属性显示图片。根据<input>的type属性决定显示输入框还是按钮，它们的宽度和高度是可以设置的。

非替换元素：

内容直接表现给用户端的元素称为成为非替换元素，常见的有：<span>、<p>、<label>等。例如<span>，它会将开始和结束标签中的内容直接在浏览器上展示出来。

四、脱离文档流

所谓脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它（余生你不必再指教了），两者位置重叠都是可以的，但是依然在DOM树中存在。

那么会使元素脱离文档流的情况有哪些呢？

1、float产生的浮动

使用float脱离文档流时，虽然其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            float: left;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
</body>
</html>

代码运行效果：

2、position:absolute;

absolute是绝对定位，绝对定位的元素以第一个非static父元素为参照。如果没有非static的父元素，则以body为参照。

下面是例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: absolute;
            top: 50px;/*给demo2一个绝对定位，并且距离body顶部 50px*/
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
    <div>这是demo3的文本</div>
</body>
</html>

代码效果如图：

我们可以看到第二个p它相对body顶部向下移动了50px；

3、position:fixed;

完全脱离文档流，相对于浏览器窗口进行定位，也就是这个p固定在浏览器窗口上了，不论我们怎么拖动滚动条都无法改变它在浏览器窗口的位置。

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: fixed;
            right: 50px;
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
    <div>这是demo3的文本</div>
</body>
</html>

下面开始讲故事帮助大家理解脱离文档流：

一个帅帅的男生（p1）和一个可爱的女孩纸(p2)，他们喜欢着对方，有一天，他们在一起了，从此过上了幸福的生活…..
故事怎么可能是这样子的（皮一下）

随着时间的推移，在某些事情的影响下（float、fixed、absolute），他们发现对方有很多的缺点，并不是完美的，有一天终于无法忍受对方，“咱们分手吧！”p1说到，balabala，他们分手了（p1脱离了文档流）。“你就当我死了吧”，p1说到。虽然男孩纸p1和女孩纸p2都还在这个世界上过着自己的生活（p1和p2都还存在于DOM树中），但是他们让对方死在了自己的心中（盒子在定位的时候，会当做没看到它）。狗血的故事讲完了。

更多精彩内容

最新文章

php里exit是什么意思

在php中，exit是退出的意思；exit()函数用于输出一条消息，并且退出当前脚本，是die()函数的别名，语法为“exit(message)”；其中的参数规...
php抽象类是什么意思

PHP抽象类指的是至少拥有一个抽象方法的类；抽象类不能被实例化，只是提供方法声明，没有具体实现，抽象类只能作为其他类的父类使用，可以利用abstract关键字来...
php怎么实现number格式化后取消千分位

在PHP中，可以利用“str_replace()”函数实现number格式化后取消千分位，该函数用于替换字符串中的一些字符，只需利用该函数替换掉number中的...
jquery中jtable方法怎么用

在jquery中，jtable方法用于创建基于Ajax的CRUD表格，是一个表格扩展插件，并且不需要进行html和JavaScript编码，语法为“<sc...
实用Word技巧分享：字符加圈的4种方法分享！

在之前的文章《实用Word技巧分享：3个超级实用的表格调整小技巧》中，我们了解了几个Word表格调整小技巧。而今天我们来聊一聊字符加圈，真是不得了，不就加个“圈...

热门文章

VUE中V-IF条件判断改变元素的样式操作

这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧...
Discuz如何解决安装时报错run_sql_error

问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
低版本VS项目在VS2019无法正常编译的问题

低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确，只是为了方便说明。后有（未安装），201？...
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)

实现原理使用redis链表来做，因为pop操作是原子的，即使有很多用户同时到达，也是依次执行，推荐使用。实现步骤第一步，先将商品库存入队列/**.trigge...
Oracle数据库的实例/表空间/用户/表之间关系简单讲解

完整的Oracle数据库通常由两部分组成：Oracle数据库和数据库实例。Oracle是一种数据库管理系统，是一种关系型的数据库管理系统。我们用这些高级权限账号...