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

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

這個樹主要還是在借CSS2.1標準的骨架，填充進一些新的CSS3標準。要不然CSS3各個module一填進去，這個樹就過于龐大了。

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

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

本段整理自標準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即三個不一樣的樣式聲明來源：瀏覽器、用戶和（頁面）作者

同級別比較才會再計算特化程度（specificity）。

tag

class

id

inline style

計算階段的各個值:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Margin Edge

Border Edge

Padding Edge

Content Edge

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

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

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

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

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

Visible Viewport

Layout Viewport

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

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

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

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

Float

Absolute positioning

普通流的高度計算流程，可一窺各個box影響布局的方式：

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

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

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

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

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

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

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

BFC：Block Formatting Context
這個概念的細則可見Smallni的《hasLayout && Block Formatting Contexts》

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