吃透文档流-熟悉又陌生的知识点

半生瓜i
545 阅读6分钟

文档流

Document Flow 文档流，是我们前端开发中最基础的一个知识点，打一个良好地基才能决定更好的上层建筑，在这篇文章中我们一起研究元素在文档流中如何排列和布局。将了解到：

  1. 常规流
  2. 浮动流
  3. 定位流
  4. 脱离文档流
  5. BFC / IFC

常规流

我们可以在 CSS2.1 规范中了解到 常规流(Normal Flow) 的定义。其中写到常规流中的任何一个元素（盒子）总是属于一种格式区域(formatting context)。块级元素是在 块格式区域（block formatting context-BFC）中工作的元素，而内联元素是在 内联格式区域（inline formatting context-IFC）中工作的元素。

关于 BFC 和 IFC 的讲解我们放在其他章节这里先不做展开。

在常规流布局中

块级（block）格式环境：在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。

内联/行内（inline）格式环境：在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。

简单的说就是

块级元素从 上到下垂直排序，元素独占一行

内联元素从 左到右水平排序，元素不独占一行，只占据所需要的空间，没有高度和宽度（由内容撑开），纵向 margin 无效 即 margin-left、margin-right对内联元素无效，margin-top、margin-bottom有效

内联块级（inline-block）元素：左到右水平排序，元素不独占一行，可以设置高度和宽度，纵向 margin 有效，集块级和内联的特点于一身，同时兼具块级和内联元素的属性

浮动流

同理，我们看一下 CSS2.1 规范中提到的 浮动流

A float is a box that is shifted to the left or right on the current line. Content flows down the right side of a left-floated box and down the left side of a right-floated box.

规范中提到，一个设置了浮动的元素，他会尽可能的在当前行向左或者向右浮动。没有设置浮动的元素会环绕在浮动元素的左右两边。如一个设置了向右(float: right)的元素，其他没有设置的浮动的元素会环绕在该元素的左边，反之同理。该特性最开始被用来做图片文字环绕效果。如下图所示

01.png

重点

浮动流脱离文档流了吗？答案是肯定的，设置了浮动属性不会使该元素脱离文档流 从上图中我们可以看到，设置了浮动之后该元素只是尽可能的往右边靠，但是还是在常规流中占据着位置，只是不是按照常规流来进行布局，而是按浮动流来进行布局，所以剩下的元素环绕在它的周围！

定位流

定义流顾名思义对应就是 position 属性，position属性比较特殊分为几种情况

下图是演示用的元素结构

02.png

static

position 默认属性，对文档流的布局没有任何影响，布局按常规流规范进行布局, 此时top,right,bottom,top,z-index属性无效。从下图可以得到验证

03.png

relative

相对定位，顾名思义，相对于自己原来在文档流的位置进行定位，在该定位下，元素先是在常规流中正常布局，然后再在不改变页面布局的前提下调整元素位置，意味着 relative 定位并没有脱离文档流，还是在文档流占据着位置，只是位置随着 top,right,bottom,top 进行定位调整。从下图也可以看到 son-static 元素没有像流布局一样环绕在 son-relative 元素旁边，而是按常规流进行布局。

04.png

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

绝对定位，和 relative 类似，绝对定位的元素位置随着 top,right,bottom,top 进行定位调整，不一样的是，绝对定位不相对于自己原来的位置进行定位，而是相对最近的定位祖先(postion 不为 static)元素进行定位，而且绝对定位的元素不会占据着原来常规流中的空间，意味着绝对定位的元素脱离了文档流，如下图所示，绝对定位的元素偏移后，son-static 元素跑到了父元素的最顶格。

06.png

fixed

固定定位，固定定位则和绝对定位类似，固定定位的元素位置随着 top,right,bottom,top 进行定位调整，同样的固定定位的元素不会占据着原来常规流中的空间，意味着固定定位的元素也脱离了文档流，不一样的是，固定定位是相对于浏览器窗口来进行定位，如下图所示

07.png

tips 想要固定定位元素不相对浏览器窗口进行定位，可以在祖先元素中设置 transform(不为revert) 属性，则固定定位元素就会相对于该祖先元素进行定位，very的好用

sticky

粘性定位，粘性定位是绝对和固定定位的结合体，其它的特性在这里就不做展开了，简单概括就是粘性定位的元素也不会占据原来常规流中的空间，意味着粘性定位也脱离了文档流

脱离文档流

在关于几种布局流的学习中，我们了解到了脱离文档流的情况在这里做个总结：

  1. float 属性不会让元素脱离文档流，只是在常规流中流动起来，还是会在常规流中占据位置
  2. position static,relative 属性不会让元素脱离文档流，元素原生在常规流中的位置还是占据着，不管元素位置有没有进行偏移
  3. position absolute, fixed, sticky 属性都会让元素真正的脱离文档流，元素原先在常规流的位置将不复存在。

BFC / IFC

篇幅问题BFC / IFC具体的知识点将放在其他篇章(coming soon...)，这里先抛出概念

BFC

IFC (coming soon ...)

BFC

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

文档最外层元素使用块布局规则或称为初始块格式上下文。这意味着<html>元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。参与 BFC 的元素使用 CSS 框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

IFC

行内格式化上下文(Inline formatting context, BFC）是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定

avatar
文章
阅读
粉丝