html5 文档流什么意思
时间:2022-06-03 [网络编程]作者:fabuyuan 浏览:6 次
html5中,文档流又称“普通流”,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式;并且最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。脱离文档流的方法:1、float浮动;2、position定位。
本教程操作环境: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树中),但是他们让对方死在了自己的心中(盒子在定位的时候,会当做没看到它)。狗血的故事讲完了。
相关推荐:《html视频教程》
以上就是html5 文档流什么意思的详细内容,更多请关注站长家园其它相关文章!
本文标签: htmlhtml5
转载请注明来源:html5 文档流什么意思
本文永久链接地址:https://www.adminjie.com/post/13130.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- app是什么应用程序的简称
- 华为dubal20是什么型号
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- 电脑显示信号线无连接是什么意思
- ana an00华为是什么型号
- html5中onclick是什么意思
- 超清视效是什么意思
- vivov1818a是什么手机型号
- html5的标题标记一共有几个等级

- 最新文章
-
-
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是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-