学习css3笔记——文档流概念了解

这个故事发生在某天，我到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。突然间，一个说自已是从辽宁辽阳来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”。
我问：“你们都想学啥？”。
女粉丝说：“陈老师！我想了解文档流概念。“下面就给大家讲下。

“流”是CSS语言中的一种基本定位和布局机制。CSS语言基础是HTML语言，而html代表性的是

和正好是CSS中块级标签元素和行级标签元素的代表。

所以，所谓“流”，就是 CSS中设计标签元素排列和定位的一条看不见的代码“水流”，这些代码元素和“水流”一样是一条接着一条的排列在页面上。

（图片来自网络）

什么是标准文档流

说白了就是“默认”状态下，标签元素排版布局过程。标签元素会自动从左往右，从上往下的顺序排列。并最终窗体自上而下分成一行，并在每行中从左至右的顺序排放标签元素。

什么是脱离文档流

标签元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的标签元素的定位基于正常的文档流，当一个标签元素脱离文档流后，在文档流中的其他标签元素，将忽略脱离文档流的标签元素，并填补掉原先脱离文档流标签元素的位置空间。

怎么脱离文档流（三种脱离法）

1：float

使用float可以脱离文档流。

2：absolute

absolute称为绝对定位，其实觉得应该称为相对定位，因为使用absolute脱离文档流后的标签元素，是相对于该标签元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）标签元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

3：fixed

完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注、分享号，如果喜欢请打赏。