关于css:什么是文档流

5次阅读

共计 2978 个字符，预计需要花费 8 分钟才能阅读完成。

明天解析来自 John Rosato 的一篇文章“What is document flow?”，什么是文档流？

结尾是摘要：

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的程序。也就是说，每个元素如何占用空间以及其余元素如何相应地定位本人。

简略点说，就是 document flow 批示了页面上的元素如何去排列。

接着，讲到了 document flow 的三种影响元素地位的办法：

显示类型

Float

定位

那么，第一种就是显示类型

HTML 元素最后按其显示类型定位。这种显示类型决定了其余元素是否可能位于它们旁边，以及填充、边距和其余 CSS 属性如何影响它。两种最重要的显示类型是：

块级

内联

陈词滥调的 block 和 inline，这里不再开展，可参考鹏哥儿写的一篇总结性文章：inline, block, inline-block 区别 ^[2]

接下来就是 float

一个 float 是在以后行向左或向右挪动的框。浮动（或“浮动”或“浮动”框）最乏味的特色是内容可能沿其一侧流动（或被“革除”属性禁止这样做）。内容从左侧浮动框的右侧向下流动，并从右侧浮动框的左侧向下流动。— W3 标准

Float 不太好翻译，第一句结尾的 float 是名词模式，还是称为“浮动框”更贴切一点！

浮动框是一种 CSS 属性，它容许你利用在一个块级元素上，能够把这个块级元素推到父类块的左边界或者右边界。这十分有用，因为它容许你去应用块级元素所提供的所有益处，同时又能解脱无奈搁置每个块级元素在同一水平线上的次要限度。然鹅，应用浮动框须要衡量取舍。

对于还未呈现 flex、grid 布局时，想要把多个块级元素放在同一行，除了用table，就是应用这个 float 了。

浮动元素来到了失常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的失落。失常来说，一个父类块的高度和宽度会拉伸去适应内容，然鹅浮动的内容不在这种状况中。父类容器的高度和宽度不会被浮动元素所批改。谢天谢地，这个臭名远扬的问题还很多解决方案，比方clearfix。你能够在这里读到更多对于clearfix。大量的网格零碎应用 float 来设计，它的确是一个网站的架构骨干。

对于clearfix，实质上也是利用 BFC^[3]。

这里有几个能够应该在元素上的定位值。应该在所有元素上的初始值是static，一个在“在流”类型，咱们将在之后谈到。

定位值：

值：static | relative | absolute | fixed | inherit

初始值：static

定位偏移属性

属性：top | right | bottom | left

这里有两组定位属性

在流

脱流

这里有两种在流定位值，他们别离是 static 和relative

static在之前有提到，元素默认应用在流值static。这象征这他们失常体现，作为每一个元素的体现类型布局。他们同样不能与脱流元素相互作用。

relative定位和 static 十分类似，当次要是不同是他们可能和脱流元素交换。一个 relative 元素能够用作脱流子元素的容器。脱流定位元素会遵循 relative 元素的边界。很酷对吧？relative 定位元素，不像static，同样能够应用定位偏移属性来去挪动它。当应用这些属性时，relative 定位元素盒会依然占据它原有的定位，然而内容会变为脱流。

这里有两种脱流定位属性，他们是 absolute 和fixed。

在 absolute 定位模型中，一个盒子齐全从失常文档流中移除（它不会影响前面的兄弟元素）并且调配一个绝对蕴含块的定位。— W3 标准

absolute 定位元素带来了层级的概念。设想一下元素只是页面上不同的小纸片而已，你能够重叠这些页面小纸片在彼此的顶部，这样一张小纸片会叠加在另外一张小纸片下面。W3 标准同样提到它恪守一个蕴含块。这个蕴含块不是它的间接父块。在之前提到的，所有 HTML 元素都是 static 定位，不会影响脱流的元素。默认地，这个蕴含快是 body 标签。如果你心愿去创立一个 HTML 元素蕴含块，那么它应该是一个除了 static 之外的任意一个定位元素（fixed, relative, 或者absolute）。

这里屡次提到蕴含块(Containing Block)，能够参考鹏哥儿写的文章：[司空见惯的 CSS 蕴含块]() ^[4]

fixed 定位是 absolute 定位的子类。惟一的区别是对于一个 fixed 定位块，蕴含块是通过窗口所创立。— W3 标准

相当间接，这个窗口就是浏览器窗口。就是说，不像相对定位元素，一个 fixed 定位元素不会遵循任何带有 fixed/absolute/relative 定位的父容器。它惟一遵循的父类块就是浏览器它自身。当你想要让一些货色常驻页面的时候，这十分有用，因为当你滚动的时候，所有 fixed 定位的元素会驻留在页面上。

至此咱们圆满完成了文档模型的解释！这篇博文会判若两人得被调整，去蕴含有用信息的图片、例子和一些练习（当我有空的时候）。

总的来说，这篇文章比拟干，没有代码和实例，John Rosato 次要对文档流做了一个概念性的总结，文档流其实就是对元素的定位，文档流一共分为四种：

失常文档流 normal document flow
显示类型 display type
浮动框 float
定位 position

了解以上几种文档流后，咱们对浏览器如何对各个元素排兵布阵有了更加宏观性地理解，能够关注集体公众号【鹏哥儿的 Echo】，学习更多。

[1] https://soulandwolf.com.au/bl…

[2] inline, block, inline-block 区别 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484012&idx=1&sn=cbeb9cb9385bd364ebfc38feaf55a41f&chksm=cf525a1df825d30bce67e954886a73b23c99a2504e93130a473877117e9c8eab460cce6f4eb5&token=666331130&lang=zh_CN#rd

[3] CSS 中的 FC 到 BFC：https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484298&idx=1&sn=1c55ab955db816ff2372020e0667c942&chksm=cf525bfbf825d2edc4262ca7b9a6f74b09877722574ca43824188098a8f4c0bcbde379ce7fce&token=32773786&lang=zh_CN#rd

[4] 司空见惯的 CSS 蕴含块 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484111&idx=1&sn=28ee87a886b7fda75fffa633f6d5997b&chksm=cf525abef825d3a840e8ab20ef05464490d3aec985d8d414a5ef21393bb9ee861992c4d9c637&token=32773786&lang=zh_CN#rd

正文完