# Learn CSS Layout 翻譯
## Box positioning in CSS
CSS布局的核心在于將一組HTML元素映射到一組矩形框远荠，并通過x,y,z定位三热。
這些盒子的定位取決于應(yīng)用到盒子上的定位方案。本章將會討論CSS2.1引入的三種定位方案:文檔流(normal flow),浮動(floats)和絕對定位(absojute positioning)。
概念上CSS布局的最高抽象就是定位方案睛低。一旦選定了定位方案诀浪，其可以被特定的定位模式修改，如`diaplay:table`或者`display:inline-table`味廊。即使CSS3的擴(kuò)展蒸甜，引入了其他的定位模式如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坐標(biāo)有重要影響红氯。規(guī)范描述了了其交互影響框咙。簡而言之所有元素默認(rèn)為normal flow，除非特別的設(shè)置了float屬性和position痢甘，其將從文檔流移除喇嘱。
| Attribute | Default value? | Purpose? ? |
| --------- | --------------- | ---------- |
| display? | block or inline | 決定布局算法? ? |
| position? | static? ? ? ? ? | 控制元素定位? ? |
| float? ? | none? ? ? ? ? ? | 允許其他元素環(huán)繞周圍 |
浮動和絕對定位元素都通過與文檔流的交互得到更好理解，所以先講文檔流塞栅。
如果仔細(xì)想一下者铜，實際上布局有兩方面
- 盒子的大小和對齊方式，其主要由display放椰，width作烟，height，magin控制
- 元素在父元素里相對其他元素如何擺放
元素在父元素中的相對位置由formatting context控制砾医，其由特定父元素為所有的子元素建立拿撩，這意味著在文檔流中要么處于block formatting context要么處于inline formatting· context。
父元素為根據(jù)子元素是inline-level還是block-level為子元素建立了fc如蚜。這里的inline-level 和block-level用來強(qiáng)調(diào)即使block的display屬性不為inline和block压恒，其仍然映射到這兩種fc里影暴。例如`display:table`元素被認(rèn)為是block-level而`display:inline-table`被認(rèn)為是inline-level。
一個block-level元素定義如下
> block-level是那些以block形式排版的元素（如段落）探赫，含有下列display屬性的為block-level：‘block','list-item','table'型宙。
>
> block-level 是那些參與bfc的盒子。每個block-level元素都生成一個主要的block-level盒子期吓，也是該盒子參與定位方案早歇。一些block-level元素還可能產(chǎn)生額外的盒子（比如list-item）這些額外的盒子相對于主要盒子放置。
幾乎所有的block-level盒子也是block-container盒子讨勤。一個block container是其他盒子的父元素箭跳，并且有獨特的fc（注：這里并沒有強(qiáng)調(diào)其形成bfc,實際上還可能產(chǎn)生ifc，只有滿足特定條件下潭千，才能產(chǎn)生bfc谱姓，其他條件則是產(chǎn)生ifc）。
> 除了table boxes[…]和替換元素刨晴，一個block-level盒子也是一個container box屉来。一個block container box要么僅包含block-level盒子，要么僅包含inline-level盒子狈癞。
一個inline-level元素定義如下：
> inline-level元素是那些不產(chǎn)生新盒子的元素茄靠。這些內(nèi)容散布于各行（如em，inline images）含有以下display屬性的元素為inline-level：'inline','inline-table','inline-block'蝶桶。inline-level元素生成inline-level盒子慨绳，其參與ifc。
>
> 一個inline box即是inline-level并且其內(nèi)容參與其包含的ifc真竖。一個帶有display為inline的非替換元素生成inline box脐雪。不是inline box的inline-level 盒子（比如inline-level 替換元素，inline-block元素恢共，inline-table元素）被稱為atomic inline-level 盒子战秋，因為其作為一個透明的盒子參與自身的inc。
這里不講替換元素和非替換元素讨韭。你可以把這兩種fc對應(yīng)到垂直排列和水平排列脂信。
上述fc有趣的地方在于每個盒子的fc必須是ifc或者bfc。但是假如我們的孩子元素是block-level和inline-level的混合怎么辦透硝。答案就是inline-level元素會被提升為block-level元素吉嚣，這就叫匿名盒子生成
### Anonymous box generation
匿名盒子生成用于當(dāng)一個父元素既包含inline-level也包含block-level或者既包含inline-level也包含text。
> 如果一個block container box含有一個block-level蹬铺，那么我們迫使他僅包含block-level
### Normal flow positioning
normal flow中，盒子參與一個特定父元素的
