relative会脱离文档流吗_脱离文档流与脱离文本流

脱离文档流与脱离文本流

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

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

使用浮动(float)

正常布局下:

In CSS, normal flow includes block formatting

of block-level boxes, inline formatting of

inline-level boxes, and relative and sticky

positioning of block-level and inline-level boxes.

Normal Flow

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.

#nf{

background-color: gray;

width:200px;

}

#fl{

background-color: black;

color:white;

}

#ap1{

background-color: yellow;

}

#ap2{

background-color: lightblue;

}

给#nf元素开启浮动:

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

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

使用绝对定位(position:absolute)

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

给#nf元素开启position:absolute:

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

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

使用绝对定位(position:fixed)

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

给#nf元素开启position:fixed:

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

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

总结

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

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

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

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

文章来源：前端培训web前端培训脱离文档流与脱离文本流 - 技术分享 - 尚硅谷www.atguigu.com

relative会脱离文档流吗_脱离文档流与脱离文本流相关推荐

php方法帮助文档,Trace方法_帮助文档_Thinkphp手册
Trace方法_帮助文档_Think 页面Trace只能用于有页面输出的情况,但是trace方法可以用在任何情况,而且trace方法可以用于AJAX等操作. Trace方法的格式:trace('变量' ...
java接口文档生成工具_接口文档生成
一.为什么要写接口文档? 1.正规的团队合作或者是项目对接,接口文档是非常重要的,一般接口文档都是通过开发人员写的.一个工整的文档显得是非重要. 2.项目开发过程中前后端工程师有一个统一的文件进行沟通 ...
网页整个技术文档怎么拷贝_企业文档管理混乱？试试文档管理系统
现代信息技术不断进步,大数据技术和云计算技术都已经"强强联合",日趋膨胀的文档该怎么管理已变为企业必须要彻底解决的关键难题.接下来,我们就一起来看一下企业文件管理中普遍存在的一些难 ...
ps流转发_一种国标PS流转RTMP直播流的实时转换方法与流程
本发明属于视频技术领域,具体涉及一种国标ps流转rtmp直播流的实时转换方法. 背景技术: ps流全称是节目流(programstream),将一个节目的多个组成部分按照它们之间的互相关系进行组织并加 ...
数据查询和业务流分开_一文带你了解大数据管道
介绍如果您从大数据开始,通常会被众多工具,框架和选项所困扰. 在本文中,我将尝试总结其成分和基本配方,以帮助您开始大数据之旅. 我的目标是对不同的工具进行分类,并试图解释每个工具的目的以及它如何适应 ...
扫描文档不清晰_使文档清晰明了的10个技巧
扫描文档不清晰因此,您有一些出色的书面文档. 怎么办? 现在是时候回去编辑它了. 当您第一次坐下来编写文档时,您希望专注于您要说的内容,而不是怎么说的方式,但是,一旦完成初稿,就该回头并稍作整理. ...
java io流操作_十个Demo进行讲解Java中IO流的常用操作~
好久不见的IO流对IO流的学习,我记得还是初学Java基础的时候,后来找工作过程中经常看到有些招聘信息中写到熟悉IO流,现在想想IO流,真的是一脸懵逼,不说这么多废话了,IO流这次好好整理一下. 说 ...
财务结算批量数据处理流式_处理极端情况：财务扩展和流式传输
财务结算批量数据处理流式编者注 :在纽约的Strata + Hadoop World 2016上,MapR企业战略与架构总监Jim Scott发表了题为"处理极端情况:财务扩展和流媒体& ...
spring jpa 流式_从响应式Spring Data存储库流式传输实时更新
spring jpa 流式这篇文章详细介绍了从数据库到对该数据感兴趣的任何其他组件进行流更新的幼稚实现. 更准确地说,如何更改Spring Data R2DBC存储库以向相关订阅者发出事件. 对R2 ...
服务器不删档的设置_不删档预捏脸开启，快来体验次世代黑科技！
昨天,执行者们期待的不删档日期正式定档:今天,EVA又要为执行者们带来一个好消息! 首先请跟着EVA回顾一下我们的定档信息: 龙族幻想7月17日开启预下载!7月18日正式不删档开服! 7月17日当天E ...

relative会脱离文档流吗_脱离文档流与脱离文本流

relative会脱离文档流吗_脱离文档流与脱离文本流相关推荐

最新文章

热门文章