html5 文档流什么意思

web前端|前端问答 A、什么是文档流？“流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。

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

B、块级元素与行内元素

块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（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都不会产生边距效果。

C、替换元素和非替换元素

细心的大家肯定发现了，像、、、等，它们也是行内元素呀，明明就可以设置宽高啊，那这里就有问题了。其实并不是所有的行内元素都不能设置宽高的。 </p><p>行内元素也分为两种：替换元素和非替换元素。</p><p><B>替换元素：</B></p><p>浏览器根据元素的标签和属性，来决定其的具体显示内容的元素，常见的有：<img>、、、<textarea>、<object>。比如浏览器根据<img>标签的src属性显示图片。根据的type属性决定显示输入框还是按钮，它们的宽度和高度是可以设置的。</p><p><B>非替换元素：</B></p><p>内容直接表现给用户端的元素称为成为非替换元素，常见的有：<span>、</p><p>、<label>等。例如<span>，它会将开始和结束标签中的内容直接在浏览器上展示出来。</p><p><B><B>D、脱离文档流</B></B></p><p>所谓脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它（余生你不必再指教了），两者位置重叠都是可以的，但是依然在DOM树中存在。 </p><p>那么会使元素脱离文档流的情况有哪些呢？ </p><p><B>1、float产生的浮动 </B></p><p>使用float脱离文档流时，虽然其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 <br /> 下面是代码：</p><pre name="colorcode" class="html"> <title>Title</title> .demo1{ width: 200px; height: 200px; border: 5px solid red; float: left; } .demo2{ width: 200px; height: 100px; border: 5px solid green; } <div>这是demo1的文本</div> <div>这是demo2的文本</div></pre><p>代码运行效果： </p><p><img decoding="async" src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/2023/web/57386.jpg" alt="html5 文档流什么意思" title="html5 文档流什么意思" alt="html5 文档流什么意思" title="html5 文档流什么意思" /></p><p><B>2、position:absolute; </B></p><p>absolute是绝对定位，绝对定位的元素以第一个非static父元素为参照。如果没有非static的父元素，则以body为参照。 </p><p>下面是例子：</p><pre name="colorcode" class="html"> <title>Title</title> .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; } <div>这是demo1的文本</div> <div>这是demo2的文本</div> <div>这是demo3的文本</div></pre><p>代码效果如图： </p><p><img decoding="async" src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/2023/web/57387.jpg" alt="html5 文档流什么意思" title="html5 文档流什么意思" alt="html5 文档流什么意思" title="html5 文档流什么意思" /><br /> 我们可以看到第二个p它相对body顶部向下移动了50px；</p><p><B>3、position:fixed; </B></p><p>完全脱离文档流，相对于浏览器窗口进行定位，也就是这个p固定在浏览器窗口上了，不论我们怎么拖动滚动条都无法改变它在浏览器窗口的位置。 </p><p>下面是代码：</p><pre name="colorcode" class="html"> <title>Title</title> .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; } <div>这是demo1的文本</div> <div>这是demo2的文本</div> <div>这是demo3的文本</div></pre><p><img decoding="async" src="https://liuzhongwei2023.oss-cn-shanghai.aliyuncs.com/uploads/2023/web/57388.jpg" alt="html5 文档流什么意思" title="html5 文档流什么意思" alt="html5 文档流什么意思" title="html5 文档流什么意思" /></p><p>下面开始讲故事帮助大家理解脱离文档流： </p><p>一个帅帅的男生（p1）和一个可爱的女孩纸(p2)，他们喜欢着对方，有一天，他们在一起了，从此过上了幸福的生活….. <br /> 故事怎么可能是这样子的（皮一下） </p><p>随着时间的推移，在某些事情的影响下（float、fixed、absolute），他们发现对方有很多的缺点，并不是完美的，有一天终于无法忍受对方，“咱们分手吧！”p1说到，balabala，他们分手了（p1脱离了文档流）。“你就当我死了吧”，p1说到。虽然男孩纸p1和女孩纸p2都还在这个世界上过着自己的生活（p1和p2都还存在于DOM树中），但是他们让对方死在了自己的心中（盒子在定位的时候，会当做没看到它）。狗血的故事讲完了。</p><p>《html视频教学》</p> <div class="tag"></div> </div><!-- .entry-content --> <hr> <li>暂无相关文章</li> <footer class="entry-footer"> <span class="cat-links">Posted in 未分类</span> </footer><!-- .entry-footer --> <!-- #post-## --> <nav class="navigation post-navigation" aria-label="文章"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"><div class="nav-previous"><a href="https://www.liuzhongwei.com/page/1258433.html" rel="prev">mysql所有表包含字符串 |mysql 获取每天的数据</a></div><div class="nav-next"><a href="https://www.liuzhongwei.com/page/434100.html" rel="next">用编程玩的小游戏软件，开发一款新游戏需要用到哪些软件 – 游戏开发 – 前端|</a></div></div> </nav> </main><!-- #main --> </section><!-- #primary --> <aside id="secondary" class="widget-area col-sm-12 col-md-12 col-lg-4" role="complementary"> <hr> <section id="block-4" class="widget widget_block"> <hr class="wp-block-separator has-alpha-channel-opacity"/> </section></aside><!-- #secondary --> </div><!-- .row --> </div><!-- .container --> </div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="container"> <div class="site-info"> © 牛的日记 | www.liuzhongwei.com <br> 网站部分内容来源于网友供稿，若有侵权请联系删除，970928#QQ.com<br> </div><!-- close .site-info --> </div> </footer><!-- #colophon --> </div><!-- #page --> <!--colorcode_start--> <script type="text/javascript" src="https://www.liuzhongwei.com/wp-content/plugins/colorcode/js/wp-colorcode.js?ver=20121102"></script> <script type="text/javascript"> window.onload = function() { DlHighlight.HELPERS.highlightByName('colorcode', 'pre','', false); } </script> <!--colorcode_end--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?362c2492cf3ac506a1c032629e391abd"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>