test

# Learn CSS Layout 翻译

## Box positioning in CSS

CSS布局的核心在于将一组HTML元素映射到一组矩形框，并通过x,y,z定位。

这些盒子的定位取决于应用到盒子上的定位方案。本章将会讨论CSS2.1引入的三种定位方案:文档流(normal flow),浮动(floats)和绝对定位(absojute positioning)。

概念上CSS布局的最高抽象就是定位方案。一旦选定了定位方案，其可以被特定的定位模式修改，如`diaplay:table`或者`display:inline-table`。即使CSS3的扩展，引入了其他的定位模式如flexbox和grid，其仍然存在于重要的定位方案里。如(`display:flex`和`display:inline-flex`）。

### 定位方案

CSS2.1定义了三种定位方案

- normal flow：包含三种formating contexts：block，inline和relative formatting context

- floats：其和normal flow以独特的方式交互。

- abaolute positioning：处理absolute和fixed元素。

这些定位方案对于元素的x，y坐标有重要影响。规范描述了了其交互影响。简而言之所有元素默认为normal flow，除非特别的设置了float属性和position，其将从文档流移除。

| Attribute | Default value  | Purpose    |

| --------- | --------------- | ---------- |

| display  | block or inline | 决定布局算法    |

| position  | static          | 控制元素定位    |

| float    | none            | 允许其他元素环绕周围 |

浮动和绝对定位元素都通过与文档流的交互得到更好理解，所以先讲文档流。

如果仔细想一下，实际上布局有两方面

- 盒子的大小和对齐方式，其主要由display，width，height，magin控制

- 元素在父元素里相对其他元素如何摆放

元素在父元素中的相对位置由formatting context控制，其由特定父元素为所有的子元素建立，这意味着在文档流中要么处于block formatting context要么处于inline formatting· context。

父元素为根据子元素是inline-level还是block-level为子元素建立了fc。这里的inline-level 和block-level用来强调即使block的display属性不为inline和block，其仍然映射到这两种fc里。例如`display:table`元素被认为是block-level而`display:inline-table`被认为是inline-level。

一个block-level元素定义如下

> block-level是那些以block形式排版的元素（如段落），含有下列display属性的为block-level：‘block','list-item','table'。

>

> block-level 是那些参与bfc的盒子。每个block-level元素都生成一个主要的block-level盒子，也是该盒子参与定位方案。一些block-level元素还可能产生额外的盒子（比如list-item）这些额外的盒子相对于主要盒子放置。

几乎所有的block-level盒子也是block-container盒子。一个block container是其他盒子的父元素，并且有独特的fc（注：这里并没有强调其形成bfc,实际上还可能产生ifc，只有满足特定条件下，才能产生bfc，其他条件则是产生ifc）。

> 除了table boxes[…]和替换元素，一个block-level盒子也是一个container box。一个block container box要么仅包含block-level盒子，要么仅包含inline-level盒子。

一个inline-level元素定义如下：

> inline-level元素是那些不产生新盒子的元素。这些内容散布于各行（如em，inline images）含有以下display属性的元素为inline-level：'inline','inline-table','inline-block'。inline-level元素生成inline-level盒子，其参与ifc。

>

> 一个inline box即是inline-level并且其内容参与其包含的ifc。一个带有display为inline的非替换元素生成inline box。不是inline box的inline-level 盒子（比如inline-level 替换元素，inline-block元素，inline-table元素）被称为atomic inline-level 盒子，因为其作为一个透明的盒子参与自身的inc。

这里不讲替换元素和非替换元素。你可以把这两种fc对应到垂直排列和水平排列。

上述fc有趣的地方在于每个盒子的fc必须是ifc或者bfc。但是假如我们的孩子元素是block-level和inline-level的混合怎么办。答案就是inline-level元素会被提升为block-level元素，这就叫匿名盒子生成

### Anonymous box generation

匿名盒子生成用于当一个父元素既包含inline-level也包含block-level或者既包含inline-level也包含text。

> 如果一个block container box含有一个block-level，那么我们迫使他仅包含block-level

### Normal flow positioning

normal flow中，盒子参与一个特定父元素的