php处理文档流,html的文档流是什么?html文档流简介
本篇文章给大家带来的内容是关于html的文档流是什么?html文档流简介，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、文档流简介
1、什么是“正常文档流”？
在学习浮动布局之前，我们先来认识一下什么叫“正常文档流”？深入了解正常文档流，对后续的浮动布局和定位布局是非常重要的一个前提，希望读者一定不要错过这一节的学习。
什么叫文档流？简单来说，就是元素在页面出现的先后顺序。
那什么叫“正常文档流”呢？我们先来看一下正常文档流的简单定义：正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素。
上面的HTML代码的文档流如下：
说明：
因为div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会会位于同一行，并且从左到右排列。
2、什么叫“脱离正常文档流”？
脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去控制的HTML文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div元素。正常文档流就是按照依次显示这5个div元素。由于div元素是块元素，因此每个div元素独占一行：
HTML代码：
上图就是按照正常文档流显示的效果图。
然后，所谓的脱离文档流就是指它所显示的位置和文档代码的顺序不一致了，比如可以用CSS控制，把最后一个div元素显示在第一个div元素的位置，如下图：
在上图中，在不改变HTML代码顺序的前提下，我们可以通过CSS来将id="div5"的div元素从正常文档流“抽”出来，然后显示在其他div元素之前。在这种情况下，id="div5"的div元素就已经“脱离正常文档流”了。
在CSS布局中，我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”，从而随心所欲地控制着页面的布局。
以上就是对html的文档流是什么?html文档流简介的全部介绍，如果您想了解更多有关Html5教程，请关注PHP中文网。
php处理文档流,html的文档流是什么?html文档流简介相关推荐
- html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
- java根据模板生成word文档_Python办公自动化：使用python来自动生成word文档
让python做办公自动化,让你闲下来 让python做自动化,让你闲下来 上节对python的excel Python办公自动化系列:自动操作Excel自动化做了介绍.这次介绍如何用python对w ...
- java获取word固定位置的值_java 实现保存Word文档中指定位置的数据,又保存整篇文档...
1:需求 用户在线编辑完word 文档后希望保存整篇文档, 同时把保存文档中指定位置的数据 2:方案 用 pageoffice 实现既保存Word文档中指定位置的数据,又保存整篇文档 4:核心思想及 ...
- 刷新4项文档智能任务纪录，百度TextMind打造ERNIE-Layout登顶文档智能权威榜单
来源:机器之心本文约2300字,建议阅读5分钟 文档智能国际权威榜单文档视觉问答 DocVQA 迎来了新霸主. 百度提出跨模态文档理解模型 ERNIE-Layout,首次将布局知识增强技术融入跨模态文 ...
- 没有会员wps合并多个sheet_WPS「合并文档」功能，如何“唰”一下把多个文档合并到一起？...
在我们的日常工作中,合并多个文档时,多数是将各文档逐一打开.复制.粘贴.关闭等,既麻烦又耗时,还会影响完成进度.那么有没有什么"骚"操作,可以快速高效合并文档?今天就给大家分享如何 ...
- 一文搞定C#关于NPOI类库的使用读写Excel以及io流文件的写出
一文搞定C#关于NPOI类库的使用读写Excel以及io流文件的写出 今天我们使用NPOI类库读写xlsx文件, 最终实现的效果如图所示 从太平洋官网下载相应的类库,大概4~5MB,不要从github ...
- 文档过期打不开怎么办_4 个超实用金山文档小技巧，很强大也很简单，赶紧收藏！...
01 设置文档权限,保护文档安全 金山文档除了可以通过链接分享给QQ.微信等好友或群组邀请对方协作编辑外,同时可以为文档设置不同权限. 以金山文档网页版举例(手机金山文档小程序同理) 打开文档后,点击 ...
- 扫描二维码读取文档_使用深度学习读取和分类扫描的文档
扫描二维码读取文档 To many people's dismay, there is still a giant wealth of paper documents floating out the ...
- 开发接口文档_更优更稳更好，看文档驱动开发模式在AIMS中的优势
[摘要]程序员常会说:我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有一个很老的梗: 我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有这种想法的程序员应该算是一个老鸟了,对于 ...
- python分解word文档为多个_用python批量处理word文档
应我家领导要求,开发一个word文档批处理脚本,涉及word文档.excel表格.文件存取.排序与索引.简单GUI等内容,前期针对各分项功能实现写了几篇小文章,现在将总体思路记录一下,作为这个系列的完 ...
最新文章
- Android官方开发文档Training系列课程中文版：构建第一款安卓应用之入门指南
- Java web表单异步提交,javaweb系统，我的电脑浏览器可以正常异步提交操作参数给后台，但是同事电脑今天却不知道怎么了，提交给后台的参数为空...
- mysql 不join的原因
- 年轻程序员需要学习的5大经验
- 模板：多项式乘法（FFTNTT）
- ScanTailor-ScanTailor 强大的多方位的满足处理扫描图片的需求
- 如何进行有效的沟通----日常沟通及会议
- 比尔盖茨夫妇宣布离婚 结束27年婚姻
- shell bash常用工具教程（curl，jq）
- Linux 下安装Eclipse C++
- LODOP 打印图片和表格
- android viewholder模式,为什么在ViewHolder模式中ViewHolder类应该是静态的？
- python任务栏都隐藏了_请问如何始终隐藏WINDOWS任务栏？
- 月薪30K的硬件工程师需要哪些技能
- Traffic Server Net子系统分析
- 学渣的刷题之旅 leetcode刷题 28. 实现 strStr()
- 关于对接海康威视综合安防平台并使用SDK下载过车视频
- 干货！学霸用12个决策模型告诉你，如何判断你到底需不需要区块链！
- 去哪找到高薪工作怎么找
- clean code（代码整洁之道）