CSS进阶03-定位体系，格式化上下文，常规流

love丁酥酥

发布于 2018-08-27 15:26:42

1.7K0

发布于 2018-08-27 15:26:42

文章被收录于专栏：coding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

在CSS2.2中，盒子根据定位体系来布局，其必然处于某个格式化上下文中。

2. 定位体系 Positioning Schemes

在CSS2.2中，盒子可以根据以下三种体系来布局：

标准流（或者说普通流） Normal Flow 。CSS2.2中，标准流包括块级盒的块格式化和行内级盒的行内格式化，以及块级盒和行内级盒的相对定位。
浮动 Floats 。在浮动模型中，一个盒子首先根据常规流布局，然后从标准流中脱离并尽可能地向左或向右位移。内容可以漂浮在浮动周围。
绝对定位 Absolutr Positioning 。在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。

浮动元素、绝对定位元素、根元素都被称为脱离文档流 Out of Flow ；其他没有脱离文档流的元素被称为在文档流内 In-flow 。元素 A 的流是由 A 和在所有文档流内且最近的脱离文档流的祖先是A的元素构成的的集合。

2.1选择定位体系： position属性

“position”和“float”属性决定了使用哪一个CSS 2.2定位算法来计算一个盒子的位置。

CSS2.2文档-position property

position属性值有如下含义：

static：盒为普通盒，根据标准流布局， top 、 right 、 bottom 、 left 属性无效。
relative：盒的定位根据标准流计算（这个位置被称为标准流内的位置）。接着盒相对其标准流中的位置移动。当B盒是相对定位，则B盒之后的盒定位时就当B没有移动一样来计算，也就是相对B盒标准流中的位置来计算。 position：relative对于table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-column-group 、 table-column 、 table-cell 以及 table-caption 元素是无效的。
absolute：盒的位置（还可能包括大小）由 top 、 right 、 bottom 、 left 属性指定。这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。这意味着它们对之后的同胞盒的布局没有影响。同时，即便绝对定位盒有外边距margin，也不同其他任何外边距折叠。
fixed：盒的定位根据 absolute 模型来计算，但除此之外，盒相对某些参照物保持固定。和 absolute 模型一样，盒的外边距也不同其他任何外边距折叠。在手持 handheld 、投影 projection 、屏幕 screen 、打字机 tty 、电视 tv 媒体类型中，盒相对视口固定且滚动时不会移动。在打印媒体类型中，即便页面是通过视口来访问的（比如打印预览），盒也渲染在所有页，并且根据页盒固定。其他媒体类型中则未定义此表现。开发者可根据依赖媒体来指定 fixed 。比如说，如果想使盒固定在屏幕视口顶部，但不出现在打印页的顶部，这两种设定可以通过使用@media规则来分开，如下：

@media screen { 
   h1#first { position: fixed } 
}
@media print { 
   h1#first { position: static }
}

用户代理不可将固定盒的内容分页显示。注意用户代理可能用其他方法打印不可见内容。

用户代理会将根元素上的 position 视为 static 。

2.2 盒偏移box offset：top，right，bottom，left属性

如果某个元素的“position”属性具有非“static”值，则该元素将被定位。定位元素生成定位盒，根据以下四个属性布局:

top 此属性指定绝对定位盒的top margin edge在其包含块的top edge向下偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的top edge。属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。
right 此属性指定绝对定位盒的right margin edge在其包含块的right edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的right edge。属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。
bottom 此属性指定绝对定位盒的bottom margin edge在其包含块的bottom edge向上偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的bottom edge。属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。
left 此属性指定绝对定位盒的left margin edge在其包含块的left edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的left edge。属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。

3. 常规流 Normal flow与格式化上下文formatting context

CSS2.1中规定，常规流中的盒子都属于某个格式化上下文，要么块格式化上下文，要么行内格式化上下文，总之不能二者得兼。块级盒参与块格式化上下文，行内级盒参与行内格式化上下文。

CSS2.2中对这个规定有了新的解释。引入了表格式化上下文。并且声明，在CSS的未来级别，将引入其他类型的格式化上下文。

果不其然，CSS3中，引入了GFC，FFC和RFC

4. 关于格式化上下文FC的简单介绍

首先我们来理解一下，什么是FC。FC的英文全称是：Formatting Contexts，直译为“格式化上下文”，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系与相互作用。

那么，FC包含哪些类型呢？答案是六种类型：BFC、IFC、TFC、GFC 、FFC，RFC。需要注意的是，CSS2.1规范中只有BFC和IFC，CSS2.2中出现TFC，CSS3才有GFC，FFC和RFC。

(以下内容还在逐步比照官方文档解读和修改中，详细内容可以点击“详细了解”)

4.1. BFC(详细了解)

BFC的英文全称是：Block Formatting Contexts，直译为“块格式化上下文”。BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

BFC拥有如下特性：
内部的Box会在垂直方向，从顶部往下一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，即会产生margin折叠。
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
如何生成BFC：
根元素，即HTML元素。
float的值不为none。
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
BFC常见用途：
常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。
防止margin折叠。
防止高度塌陷。

4.2. IFC

IFC的英文全称是：Inline Formatting Contexts，直译为"行内格式化上下文"。IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。

IFC拥有如下特性
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC。每个IFC对外表现为块级元素，与div垂直排列。
IFC常见用途：
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

4.3 TFC

TFC的英文全称是：Table Formatting Contexts，直译为“表格式化上下文”。

（待补充...）

4.4 GFC

GFC的英文全称是：Grid Formatting Contexts，直译为“网格格式化上下文”。当为一个元素设置display:grid的时候，此元素将会获得一个独立的渲染区域。我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。

4.5. FFC

FFC的英文全称是：Flex Formatting Contexts，直译为“弹性格式化上下文”。display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或 inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox定义了伸缩容器内伸缩项目该如何布局。

整体来说，FFC与BFC有点儿类似，但有以下几点区别：