HTML 文档流和文本流的理解

文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从文本流脱离出来显示。

文档流,英文原版文档为"normal flow",翻译成常规流、普通流也就更好理解它了。

从直观上理解,常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素)。

定位类型包括三种:

常规流:又包含三种类型:块级元素的块级格式、行内元素的行内格式以及两种元素的相对定位方式。

浮动(float)

绝对定位(position:absolute/position:fixed)

 

W3C的文档:
9.3 Positioning schemes

In CSS 2.1, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

1 脱离文档流

所以说,脱离文档流只有两种情况,float和绝对定位。

1.1 浮动脱离文档流

利用float脱离文档流的时候,其他盒子元素会无视这个元素,但是其他盒子内的文字依然会为它让出位子,环绕在其周围,也就是说不脱离文本流。下面是在常规流中的代码及效果(只展示body中的内容):

 

<div class="outOfNormal">This is outofNormal content area.
</div>
<h2>normal contentnormal contentnormal contentnormal contentnormal content</h2>
<p>This is normal content area.This is normal content area.This is normal content area.This is normal content area.</p>

 

CSS:

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;
}

效果图:

 

给div加上浮动属性之后:

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;float:left;
}

 

可以发现,div脱离了文档流,h2元素和p元素都定位不到div,所以顶了上来。但是其中的文字却还是定位在div的右边,说明此时脱离了文档流,并没有脱离文本流。

但是值得注意的是,如果一个浮动元素的上一个元素也是浮动的,那么它会跟在上一个元素的后面。

1.2 绝对定位脱离文档流(absolute)

将浮动改为绝对定位(absolute):

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;position:absolute;
}

可以发现此时的文字也顶到最左侧,忽略了div,脱离了文档流同时也脱离了文本流。

1.2 绝对定位脱离文档流(fixed)

再用position:fixed;试试:

.outOfNormal{height: 200px;width: 220px;background-color: #000000;color:#FFFFFF;text-align:center;line-height:200px;overflow:hidden;position:fixed;
}

发现效果相同。

总结:也就是说使用float可以使元素脱离文档流而不脱离文本流(元素无视它的存在,但是元素中的文字会围绕在它周围,但是不会脱离dom树,用浏览器的审查元素就可以看到脱离文档流的元素、),而使用绝对定位可以使元素脱离文档流和文本流(元素和其中的文字都定位不到它的存在)。

参考:https://www.zhihu.com/question/24529373/answer/29135021

    https://www.zhihu.com/question/21911352

转载于:https://www.cnblogs.com/xiaokeai0110/p/9184983.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266871.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CCNA实验(一)

无线局域网&#xff08;WLAN&#xff09;回顾 使用无线射频信号、载波监听多路访问/冲突避免、半双工。 无线AP相当于以太网的HUB。 有些频段是受限的。 无线信号遇到的问题&#xff1a; l 反射 l 散射 l 信号吸收&#xff08;比如说穿墙&#xff09; 无线标准 l ITU-R l …

linux中postfix(基于源码)的邮件系统

一、安装前的准备工作&#xff1a; 首先配置yum服务器&#xff0c;安装dns 1、安装所需的rpm包&#xff0c;这包括以下这些&#xff1a; httpd, php, php-mysql, mysql, mysql-server, mysql-devel, openssl-devel, dovecot, perl-DBD-MySQL, tcl, tcl-devel, libart_lgpl, li…

UE4 集成讯飞听写插件

搞了几天&#xff0c;有些坑记录一下。 3个方面的知识需要学习 1、制作UE4插件 2、引入第三方库 3、讯飞听写的api 一看是参考 https://blog.csdn.net/u012793104/article/details/78067937 http://doc.xfyun.cn/msc_windows/%E8%AF%AD%E9%9F%B3%E5%90%AC%E5%86%99.html API&am…

c51单片机有几个终端语言,吃过大亏,才知道要从51单片机入手

原标题&#xff1a;吃过大亏&#xff0c;才知道要从51单片机入手在这里&#xff0c;我就不说什么是单片机了&#xff0c;而是说说怎样学单片机&#xff0c;就我个人而言先学51,因为这个单片机在中国市场上发展了几十年了&#xff0c;现在工程中用的比较多的也是MCS-51, 它的资料…

c primer plus(第五版)读书笔计 第二章(3)

// 2-2.c --------把两个fathoms换算成英尺#include <stdio.h>int main (void){int feet, fathoms;fathoms 2;feet 6 * fathoms;printf ("There are %d feet in %d fathoms !\n",feet,fathoms);printf ("Yes , I said %d feet !\n",6 * fathoms);r…

云计算-openstack简介

云计算云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&#xff0c; 进入可配置的计算资源共享池&#xff08;资源包括网络&#xff0c;服务器&#xff0c;存储&#xff0c;应用软件&#xff0c;服务&#xff09;&#xff0c;这些资源能…

C语言循环不执行语句,求大神来看一下 为什么for循环中scanf语句不执行?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include#define MAX_VERTEX_NUM 20typedef struct{char vexs[MAX_VERTEX_NUM];// 顶点向量int AdjMatrix[MAX_VERTEX_NUM][MAX_VERTEX_NUM];// 邻接矩阵intvexnum, arcnum;// 顶点数、边/弧数}MGraph;int n,path[100];bool visite…

医疗项目中对网编的一些理解看法

医疗项目中对网编的一些理解看法。做网络营销都有一个前提&#xff0c;那就是以用户为中心&#xff0c;站在用户的角度考 虑问题。在网络营销中&#xff0c;网编如何提升充实自己&#xff1f;怎么获得信息渠道&#xff1f;见多&#xff1a;多看&#xff0c;多了解行业的变化&am…

android 自定义view画表格,Android自定义View实现课程表表格

自己闲下来时间写的一个课表控件&#xff0c;使用的自定义LinearLayout&#xff0c;里面View都是用代码实现的&#xff0c;最终效果如下图&#xff0c;写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数&#xff0c;和节数大概的布局三…

26.中继器数据的添加与删除

选择中继器里面的数据集再选择增加行 勾上之后选择下方的增加行就可以填入数据了 用变量获取用户输入的各项内容 但是图片不能用公式操作 方法&#xff1a;通过右键单击图片获得图片的地址 图片中蓝色的部分就是相对路径 把这个路径放到中继器的数据里就可以用了 以上是添加&am…

如何在android模拟器中安装apk软件

这个是我从别的网站上看到的&#xff0c;而且亲身试验了&#xff0c;是可以的&#xff0c;和大家分享一下&#xff01;如何在模拟器上安装apk软件 首先我们需要的是在电脑上安装Android系统的模拟器。安装模拟器&#xff0c;需要需要下载Android SDK&#xff1a;SDK由官方网站…

android工作机制和内核,android内核剖析学习笔记:AMS(ActivityManagerService)内部原理和工作机制...

一、ActivityManagerService提供的主要功能&#xff1a;(1)统一调度各应用程序的Activity(2)内存管理(3)进程管理二、启动一个Activity的方式有以下几种&#xff1a;(1)在应用程序中调用startActivity启动指定的Activity(2)在Home程序中单击一个应用图标&#xff0c;启动新的Ac…

从.Net到Java学习第四篇——spring boot+redis

从.Net到Java学习系列目录 “学习java已经十天&#xff0c;有时也怀念当初.net的经典&#xff0c;让这语言将你我相连&#xff0c;怀念你......”接上一篇&#xff0c;本篇使用到的框架redis、FastJSON。 环境准备 安装redis&#xff0c;下图是我本机的redis绿色版&#xff0c;…

hdu 4409 Family Name List LCA +stl

http://acm.hdu.edu.cn/showproblem.php?pid4409 赛后才过只能说悲剧了&#xff0c;知道思路&#xff0c;stl不熟悉&#xff0c;所以导致写的很慢....占据了很多时间&#xff0c;手速代码准确度。。哎。。。 题意&#xff1a; 给你一个家谱&#xff0c;n个人的姓名&#xff0c…

mysql杂记

1、 mysql安装完成后需要将mysql里面的bin目录加到环境变量里之后&#xff0c;才能在cmd窗口里使用mysql命令 2、 在CMD命令窗口敲入命令 mysql -hlocalhost -uroot -ppassword进入mysql数据库 这里我的用户名是root&#xff0c;密码是123456 转载于:https://www.cnblogs.com/y…

android包名更换后升级方案,Android增量升级方案

背景随着业务的发展&#xff0c;安装包的体积也在不断的增大&#xff0c;这时候&#xff0c;如果要版本更新&#xff0c;用户不得不去下载完整的安装包。但是如果使用增量升级方案&#xff0c;用户只需要下载新旧版本的差异包&#xff0c;然后在本地合成就行&#xff0c;这样省…

Linux 学习 Ubuntu 12.04 配置指南

关于Ubuntu 就不在此详细的叙述&#xff0c; 安装方法&#xff1a; 硬盘安装&#xff0c;速度效果都还不错 http://www.nenew.net/ubuntu-12-04-hard-disk-install-tutorial.html 详细的方法可以去这里看一下 U盘安装&#xff1a;这个就更加的简单&#xff0c;我一般都是使用 U…

vue created 生命周期

在实例创建完成后被立即调用。在这一步&#xff0c;实例已完成以下的配置&#xff1a;数据观测 (data observer)&#xff0c;属性和方法的运算&#xff0c;watch/event 事件回调。然而&#xff0c;挂载阶段还没开始&#xff0c;$el属性目前不可见。 methods、data、watch等可以…

android cne服务,Android内存优化-了解内存篇

查看系统内存文件shellaries:/ $ cat /proc/meminfoMemTotal: 1970216 kBMemFree: 83756 kBBuffers: 156020 kBCached: 702516 kBSwapCached: 0 kBActive: 1160284 kBInactive: 397932 kBActive(anon): 778932 kBInactive(anon): 2228 kBActive(file): 381352 kBInactive(file)…

《鸟哥的linux私房菜-服务器篇 第三版》 RHCA亲授

经典再现&#xff0c;《鸟哥的linux私房菜-服务 器篇&#xff08;第三版&#xff09;》远程班隆重推出&#xff01; 鸟哥的linux的私房菜是linux教材中的 经典中的经典&#xff01;是学习linux的绝佳资 料&#xff01; 上课时间&#xff1a; 周一到周五 上课方式&#xff1a;全…