乐趣区

关于css:什么是文档流

jiezi

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

结尾是摘要：

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

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

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

  • 显示类型
  • Float
  • 定位

显示类型

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

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

  • 块级
  • 内联

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

Float

接下来就是 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 次要对文档流做了一个概念性的总结，文档流其实就是对元素的定位，文档流一共分为四种：

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

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

REFERENCE

[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

退出移动版