摘要：屬性語法層面僅對(duì)屬性作粗略分類。重點(diǎn)還是概念均決定了布局基礎(chǔ)模式。常規(guī)布局的重心與難點(diǎn)。對(duì)應(yīng)標(biāo)準(zhǔn)第章布局上下文格式化上下文在常規(guī)流中的框，都屬于一個(gè)格式化的上下文中規(guī)則脫胎自文字排印，核心概念是。

發(fā)端自此。本文細(xì)節(jié)從略，只做主干梳理。

這個(gè)樹主要還是在借CSS2.1標(biāo)準(zhǔn)的骨架，填充進(jìn)一些新的CSS3標(biāo)準(zhǔn)。要不然CSS3各個(gè)module一填進(jìn)去，這個(gè)樹就過于龐大了。

本段分類方式部分參考了wiki《Comparison of Layout Engines》。

語法層面僅對(duì)屬性作粗略分類。重點(diǎn)還是概念（display, position, float均決定了布局基礎(chǔ)模式）。

本段整理自標(biāo)準(zhǔn)http://www.w3.org/TR/css3-values

根據(jù)來源和重要程度，這樣排序：

user agent declarations

user normal declarations

author normal declarations

author important declarations

user important declarations

p.s. User Agent、User和Author即三個(gè)不一樣的樣式聲明來源：瀏覽器、用戶和（頁面）作者

同級(jí)別比較才會(huì)再計(jì)算特化程度（specificity）。

tag

class

id

inline style

計(jì)算階段的各個(gè)值:

指定值Specified values：在樣式表中指定的值

將確定一個(gè)屬性使用的是聲明值、繼承值還是初始值

計(jì)算值Computed values：格式化文檔之前，根據(jù)樣式表計(jì)算出的值

相對(duì)的URI將轉(zhuǎn)化為絕對(duì)URI

float: left將導(dǎo)致計(jì)算值為display:block也發(fā)生在這一步

相對(duì)單位em將轉(zhuǎn)化為px或類似單位（當(dāng)然，如果font-size中用到了em，則需要到下一步才能算出）

使用值Used values：格式化文檔之后，根據(jù)樣式表及層疊關(guān)系計(jì)算出的值

百分比值轉(zhuǎn)化為px或類似單位

line-height的相應(yīng)計(jì)算

真實(shí)值A(chǔ)ctual values：使用值在一些UA中可能不允許被使用，因此還可能發(fā)生針對(duì)UA的轉(zhuǎn)化

比如在chrome里面，px不允許有小數(shù)，因此就算使用值是33.333px，真實(shí)值將是33px。這可能導(dǎo)致一些subpixel bug

比如在kindle的瀏覽器里面，UA本身不支持灰度以外的顏色，因此所有的顏色將會(huì)轉(zhuǎn)化會(huì)灰色

對(duì)應(yīng)CSS2.1第8章 Box model，十分基礎(chǔ)，介紹的文章很少出問題，就不多說了。

這幾個(gè)概念將在“包含塊”里面再次提到：

Margin Edge

Border Edge

Padding Edge

Content Edge

不理解“包含塊”的概念，永遠(yuǎn)無法完全理解width:100%、width:auto、top: 0;等究竟是相對(duì)何而言的。參考W3Help《包含塊( Containing block )》：

替換元素，定義見W3C《第三章：定義》。在W3C的第十章有專門針對(duì)替換元素的定位進(jìn)行闡述。

內(nèi)容區(qū)塊超出CSS格式化模型

大多有一些固有寬/高/比例

參見quirksmode的《兩個(gè)視口的故事【1】、【2】》。

Visible Viewport

Layout Viewport

布局體系，決定元素出現(xiàn)在哪里及相互影響的方式。

CSS2.1的重心與難點(diǎn)。
本部分網(wǎng)絡(luò)非常多謬誤，很容易被各路水貨帶進(jìn)坑。
最好參照W3Help《CSS 定位體系概述》和后面幾章，對(duì)應(yīng)標(biāo)準(zhǔn)CSS2.1《第9章 Visual formatting model》，《第10章 Visual formatting model details》來理解。

常規(guī)布局又分為三大塊：

Normal Flow
出現(xiàn)inline-box、line-box、block-box的概念，同時(shí)又提出了BFC和IFC。

Float

Absolute positioning

普通流的高度計(jì)算流程，可一窺各個(gè)box影響布局的方式：

根據(jù) "line-height" 屬性計(jì)算出每個(gè)行內(nèi)元素的inline-box高度；

根據(jù) "vertical-align" 屬性計(jì)算出每個(gè)inline-box的垂直對(duì)齊方式；

line-box的高度是垂直對(duì)齊排列最上面inline-box的頂邊和最下邊inline-box的底邊距離；
如果inline-box字號(hào)設(shè)置大于行內(nèi)框的 "line-height" 設(shè)置，文字將溢出當(dāng)前l(fā)ine-box，他可能造成多行時(shí)文字相互覆蓋；

在沒有其他塊級(jí)內(nèi)容的情況下，整個(gè)block-box的高度取決于多個(gè)line-box累計(jì)的高度
每個(gè)計(jì)算出的行框在垂直高度上排列沒有間隙

表格布局很復(fù)雜，對(duì)外部的影響可屬于Normal Flow，內(nèi)部又區(qū)別于Normal Flow元素相互影響的方式。對(duì)應(yīng)標(biāo)準(zhǔn)CSS2.1《第17章 Tables》

在常規(guī)流中的框，都屬于一個(gè)格式化的上下文中：

IFC：Inline Formatting Context
規(guī)則脫胎自文字排印，核心概念是vertical-align、line-height。

BFC：Block Formatting Context
這個(gè)概念的細(xì)則可見Smallni的《hasLayout && Block Formatting Contexts》

決定元素有重合時(shí)的相互覆蓋情況。
CSS2.1時(shí)期的規(guī)則可參考W3Help《分層的顯示( Layered presentation )》
進(jìn)入CSS3以后，Stacking Context不僅僅由z-index創(chuàng)建，而這導(dǎo)致了它的復(fù)雜性?？蓞⒖糓DN《The stacking context》。