推广 热搜: 收购ACF  石英加热管,  800  T型槽试验平台  求购ACF  深圳回收ACF  回收ACF  T型槽装配平台  求购日立ACF  T型槽地梁 

html 文档的基本组成部分(HTML中的文档流和文本流)

   日期:2023-06-18     浏览:57    评论:0    
核心提示:概述 在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-f

概述

在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?

文档流与文本流

文本流

文本流,简单来说就是元素内部的一系列的字符的排列规则。

文档流

文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通流等。

文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动地从左到右(非块级元素),从上到下(块级元素)的排列规则。

元素在排版中的定位类型分为三种:

(1)文档流:块级格式化的块级盒子, 行内格式化的行内盒子以及相对定位的块级盒子和行内盒子

(2)浮动(float) (3)绝对定位(position:absolute/fixed)

此处参考W3C标准: https://www.w3.org/TR/2016/WD-css-position-3-20160517/#positioning-schemes

html 文档的基本组成部分(HTML中的文档流和文本流)(1)

脱离文档流与脱离文本流

根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。

那么我们接下来来看看他们的区别吧

使用浮动(float)

正常布局下:

html 文档的基本组成部分(HTML中的文档流和文本流)(2)

<div id="nf">In CSS, normal flow includes block formattingof block-level boxes, inline formatting ofinline-level boxes, and relative and stickypositioning of block-level and inline-level boxes.</div><div id="fl">Normal Flow</div><p id="ap1">Normal Flow</p><p id="ap2">In the absolute positioning model, a box isremoved from the normal flow entirely (it hasno impact on later siblings) and assigned aposition with respect to a containing block.</p>

<style>#nf{background-color: gray;width:200px;}#fl{background-color: black;color:white;}#ap1{background-color: yellow;}#ap2{background-color: lightblue;}</style>

给#nf元素开启浮动:

html 文档的基本组成部分(HTML中的文档流和文本流)(3)

html 文档的基本组成部分(HTML中的文档流和文本流)(4)

html 文档的基本组成部分(HTML中的文档流和文本流)(5)

从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本却并没有无视#nf元素的位置。

该情况说明,浮动会使元素脱离文档流,但是并不会脱离文本流,在文本流中还是占有位置的

使用绝对定位(position:absolute)

未使用绝对定位(position:absolute)之前,页面的代码和样式与浮动案例中的初始情况相同

给#nf元素开启position:absolute:

html 文档的基本组成部分(HTML中的文档流和文本流)(6)

html 文档的基本组成部分(HTML中的文档流和文本流)(7)

html 文档的基本组成部分(HTML中的文档流和文本流)(8)

从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本同样也无视#nf元素的位置。

该情况说明,绝对定位(position:absolute)会使元素脱离文档流和文本流。

使用绝对定位(position:fixed)

未使用绝对定位(position:fixed)之前,页面的代码和样式与浮动案例中的初始情况相同

给#nf元素开启position:fixed:

html 文档的基本组成部分(HTML中的文档流和文本流)(9)

html 文档的基本组成部分(HTML中的文档流和文本流)(10)

html 文档的基本组成部分(HTML中的文档流和文本流)(11)

从上面的图中,我们可以看出#fl,#ap1,#ap2元素以及其内部文本都无视了#nf元素的位置。

该情况说明,绝对定位(position:fixed)会使元素脱离文档流和文本流。

总结

脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

浮动(float)与绝对定位(position:absolute/fixed)之间的区别就是

(1)浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。

(2)绝对定位会使元素脱离文档流,同时也会脱离文本流, 在于其他盒子的文本内容计算布局的时候,不占位置。

web前端之二叉搜索树

前端最常见的四种排序算法

前端项目性能优化-面试题

前端ES6高频面试题

前端高频面试题Web移动端

,
原文链接:http://www.souke.org/news/show-107449.html,转载和复制请保留此链接。
以上就是关于html 文档的基本组成部分(HTML中的文档流和文本流)全部的内容,关注我们,带您了解更多相关内容。
 
标签: 文档 元素 文本
打赏
 
更多>同类资讯
0相关评论

推荐资讯
网站首页  |  VIP套餐介绍  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  SITEMAPS  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报