CSS文档流(Normal Flow)详细介绍

原文链接

CSS 有三种基本的定位机制:普通流、浮动流、定位流

一、文档流
文档流:可以理解为元素的一种状态,处于这种状态下的元素具有一些特性。说白了,标准文档流就是一个“默认”状态,即元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

(1)块元素

        ①多个块元素(兄弟关系)处于文档流时,从上到下各占一行排列;

         ②文档流中的块元素的width的默认值与父元素的width相同;

        ③文档流中的块元素的height的默认由子元素的狂模型的高度决定。(子元素撑起父元素)。

(2)内联元素

        ①多个内联元素在处于文档流时,从左到右依次排开,一行不足以容纳则会换行;

        ②处于文档流中的内联元素不能设置width和height,内容区大小由内容大小决定。

Q: 脱离文档流就不占据空间了吗?
A: 可以这么说。更准确地一点说,是一个元素脱离文档流(out of normal flow)之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的。

Q: 脱离文档流是不是指该元素从DOM树中脱离?
A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里,下面的截图里也可以看到。

元素脱离文档流后的变化

(1)块元素

        ①若一个块元素脱离文档流,它下面的,处于文档流中的兄弟元素会上移;

        ②多个块元素可以在同一行(比如都设置浮动);

        ③块元素被内容撑开,也就是说,width的默认值不是父元素的width。

(2)内联元素

        可以设置width和height(变成了块元素)。

(3)口语化总结:脱离文档流,也就是将元素从普通的布局排版中拿走,不占据位置(悬空了),其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用position脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值