作爲一個廣受好評的瀏覽器引擎，其網頁佈局的質量(包括速度、效率、符合標準度等)往往是其關鍵，那麼WebKit究竟是如何佈局網頁上的所有元素(包括滾動條、文字、圖片、按鈕、下拉框等)呢？其主要數據結構及流程都包括哪些呢？其佈局的基本概念及標準都有哪些呢？下面分別介紹WebKit對其實現及運用。我們首先從關於佈局的基本概念及標準的認識開始。
一、CSS佈局相關標準介紹
其實我們對要素的佈局都有不同程度的瞭解如我們使用Office時經常使用對一段文字的居中、靠左等操作，複雜一點有設置編號及文字與圖片的環繞對應關係等，其實佈局的關鍵在於確定頁面元素的顯示位置及大小，而頁面中主要包括有文字、圖片、按鈕等頁面元素，爲了有效的組織布局這些頁面元素，一些專家學者經過多年的摸索，總結並設計了佈局這些元素所涉及的一些規則及標準，這就是CSS標準。
其中Visual formatting model details對其主要規則進行過具體描述，通過下面相關總結和彙總希望能對其主要要點有一定的認識與理解。
二、佈局頁面的基本概念
要在一塊指定的畫布(或窗口)上佈局一些要素，往往需要按從上到下或從左到右(或從右到左)的規則來佈局這些元素，而有些元素則可以包含其他元素，當作佈局容器來使用。其中瀏覽網頁的原生窗口就可看作一個佈局容器的根。
由於頁面內容的大小可能超過原生窗口提供的顯示區域的大小，CSS中稱頁面上當前顯示出來的區域爲ViewPort，這個ViewPort相對頁面的原始位置可通過滾動條來調整；
CSS標準中定義了html中的一些標籤所對應的元素可當成容器使用的，以建立座標定位所包含的元素如p、div，CSS中稱這樣的元素爲block-level元素，相鄰的block-level元素往往從上到下垂直排列；
而 其他象i、a、b、span等標籤及textnode對應的元素則缺省爲inline-level元素，inline-level元素不能用來定位其他元素，但可以包含其他同爲inline-level元素，相鄰的inline-level元素，往往按照從左到右或從右到左的水平方向排列；
block-level元素所包含的元素往往要麼全爲block-level元素要麼全爲inline-level元素，在一定條件下佈局時可能會產生匿名block-level元素；
而頁面上的每一個元素必須對應一個佈局容器稱之爲Containing Block，只有block-level元素可以成爲Containing Block；
一個Containing Block元素究竟包含哪些子元素或者某一元素的Containing Block元素究竟是誰，由其自身position屬性及其在文檔層次結構中所處的位置所確定，下一節會描述相關內容；
而 每一個元素至少包含一個Box模型即由margin、border、padding、contentwidth/height等屬性所能描述的矩形區域；而這塊區域相對於佈局容器的座標top、left，往往由佈局容器按照block-flow、inline-flow等規則佈局該元素時確定；
CSS中將佈局block-level元素的過程稱爲block-flow；將佈局inline-level相關元素的過程稱爲line-flow；
而CSS對html中諸如標籤frame、image、object、embed、form等對應的元素稱爲replaced元素，它表示這些元素的內部佈局不由Css來定義，而由瀏覽器來實現，而這些元素從外部來看相當於block-level元素，但可通過設置display:inline將其從外部看設爲inline-level元素；
不同的html標籤元素可以通過display:inline、display:block、display:inline-block等方式來調整其缺省block-level或inline-level屬性；
三、如何確定頁面元素顯示位置
一個html標籤元素的position屬性可以設置爲static、relative、fixed、absolute、inherit等，所有元素缺省爲static，其ContainingBlock佈局容器元素爲最近的祖先block-level元素，其屬性left、top、right、bottom不起作用；
position屬性爲relative的元素同static屬性元素一樣，但其left、top等屬性可以有效，其座標相對於佈局容器而言；
position屬性爲absolute的元素的佈局容器元素是最近的除了其屬性不爲static的祖先block-level元素；
position屬性爲fiexed的元素的佈局容器元素是往往是根佈局容器，但其定位座標需要根據ViewPort的位置作相應調整；
一 旦確定了其ContainingBlock佈局容器，同時結合其自身的block-level或inline-level特性，佈局時根據block flow和inlineflow規則就可確定其起始位置，其中inline-level元素可在其佈局容器提供的區域內自動換行；而block-level元素可在其佈局容器提供的區域內自動換一個段落。
另外float屬性爲left或right元素較爲特殊，則不遵守上面的規則，該元素讓在其高度範圍內的其他元素始終在其左邊或右邊。
四、如何確定頁面元素大小
對 於有定義其寬高的頁面元素，則按照其定義的寬高來確定其大小，而對於象textnode這樣的inline-level則需要結合其字體大小及文字的多少等來確定其對應的寬高；如果頁面元素所確定的寬高超過了佈局容器Containing Block所能提供的寬高，同時其overflow屬性爲visible或auto，則會提供滾動條來保證可以顯示其所有內容。
除非定義了頁面元素的寬高，一般說來頁面元素的寬高是在佈局的時候通過相關計算得出來的。
五、如何理解z-index的使用
頁面元素z-index屬性的出現，引入了頁面元素三維佈局的思路，提出分層的概念，具有同一z-index屬性的所有元素按照上面提到的二維佈局方式(確定其位置及大小)來佈局，而不同z-index所代表的層的元素有可能被其他層的元素所覆蓋。每一個頁面元素只能處在一個z-index所對應的層中，所有元素缺省z-index爲0。
六、總結
CSS佈局標準的內容相當多，有的還相當複雜，這裏只是初步的瞭解其基本原則及要素，也未必在各種條件下都成立，希望能爲我們能從WebKit代碼去了解WebKit究竟是如何佈局頁面元素作一定準備而已，如果要想對CSS標準有更深入的具體理解，只有不斷的練習及閱讀理解CSS佈局標準文檔。
七、參考資源
CSS Wiki
CSS Specification
Visual formatting model details
一、CSS佈局相關標準介紹
其實我們對要素的佈局都有不同程度的瞭解如我們使用Office時經常使用對一段文字的居中、靠左等操作，複雜一點有設置編號及文字與圖片的環繞對應關係等，其實佈局的關鍵在於確定頁面元素的顯示位置及大小，而頁面中主要包括有文字、圖片、按鈕等頁面元素，爲了有效的組織布局這些頁面元素，一些專家學者經過多年的摸索，總結並設計了佈局這些元素所涉及的一些規則及標準，這就是CSS標準。
其中Visual formatting model details對其主要規則進行過具體描述，通過下面相關總結和彙總希望能對其主要要點有一定的認識與理解。
二、佈局頁面的基本概念
要在一塊指定的畫布(或窗口)上佈局一些要素，往往需要按從上到下或從左到右(或從右到左)的規則來佈局這些元素，而有些元素則可以包含其他元素，當作佈局容器來使用。其中瀏覽網頁的原生窗口就可看作一個佈局容器的根。
由於頁面內容的大小可能超過原生窗口提供的顯示區域的大小，CSS中稱頁面上當前顯示出來的區域爲ViewPort，這個ViewPort相對頁面的原始位置可通過滾動條來調整；
CSS標準中定義了html中的一些標籤所對應的元素可當成容器使用的，以建立座標定位所包含的元素如p、div，CSS中稱這樣的元素爲block-level元素，相鄰的block-level元素往往從上到下垂直排列；
而 其他象i、a、b、span等標籤及textnode對應的元素則缺省爲inline-level元素，inline-level元素不能用來定位其他元素，但可以包含其他同爲inline-level元素，相鄰的inline-level元素，往往按照從左到右或從右到左的水平方向排列；
block-level元素所包含的元素往往要麼全爲block-level元素要麼全爲inline-level元素，在一定條件下佈局時可能會產生匿名block-level元素；
而頁面上的每一個元素必須對應一個佈局容器稱之爲Containing Block，只有block-level元素可以成爲Containing Block；
一個Containing Block元素究竟包含哪些子元素或者某一元素的Containing Block元素究竟是誰，由其自身position屬性及其在文檔層次結構中所處的位置所確定，下一節會描述相關內容；
而 每一個元素至少包含一個Box模型即由margin、border、padding、contentwidth/height等屬性所能描述的矩形區域；而這塊區域相對於佈局容器的座標top、left，往往由佈局容器按照block-flow、inline-flow等規則佈局該元素時確定；
CSS中將佈局block-level元素的過程稱爲block-flow；將佈局inline-level相關元素的過程稱爲line-flow；
而CSS對html中諸如標籤frame、image、object、embed、form等對應的元素稱爲replaced元素，它表示這些元素的內部佈局不由Css來定義，而由瀏覽器來實現，而這些元素從外部來看相當於block-level元素，但可通過設置display:inline將其從外部看設爲inline-level元素；
不同的html標籤元素可以通過display:inline、display:block、display:inline-block等方式來調整其缺省block-level或inline-level屬性；
三、如何確定頁面元素顯示位置
一個html標籤元素的position屬性可以設置爲static、relative、fixed、absolute、inherit等，所有元素缺省爲static，其ContainingBlock佈局容器元素爲最近的祖先block-level元素，其屬性left、top、right、bottom不起作用；
position屬性爲relative的元素同static屬性元素一樣，但其left、top等屬性可以有效，其座標相對於佈局容器而言；
position屬性爲absolute的元素的佈局容器元素是最近的除了其屬性不爲static的祖先block-level元素；
position屬性爲fiexed的元素的佈局容器元素是往往是根佈局容器，但其定位座標需要根據ViewPort的位置作相應調整；
一 旦確定了其ContainingBlock佈局容器，同時結合其自身的block-level或inline-level特性，佈局時根據block flow和inlineflow規則就可確定其起始位置，其中inline-level元素可在其佈局容器提供的區域內自動換行；而block-level元素可在其佈局容器提供的區域內自動換一個段落。
另外float屬性爲left或right元素較爲特殊，則不遵守上面的規則，該元素讓在其高度範圍內的其他元素始終在其左邊或右邊。
四、如何確定頁面元素大小
對 於有定義其寬高的頁面元素，則按照其定義的寬高來確定其大小，而對於象textnode這樣的inline-level則需要結合其字體大小及文字的多少等來確定其對應的寬高；如果頁面元素所確定的寬高超過了佈局容器Containing Block所能提供的寬高，同時其overflow屬性爲visible或auto，則會提供滾動條來保證可以顯示其所有內容。
除非定義了頁面元素的寬高，一般說來頁面元素的寬高是在佈局的時候通過相關計算得出來的。
五、如何理解z-index的使用
頁面元素z-index屬性的出現，引入了頁面元素三維佈局的思路，提出分層的概念，具有同一z-index屬性的所有元素按照上面提到的二維佈局方式(確定其位置及大小)來佈局，而不同z-index所代表的層的元素有可能被其他層的元素所覆蓋。每一個頁面元素只能處在一個z-index所對應的層中，所有元素缺省z-index爲0。
六、總結
CSS佈局標準的內容相當多，有的還相當複雜，這裏只是初步的瞭解其基本原則及要素，也未必在各種條件下都成立，希望能爲我們能從WebKit代碼去了解WebKit究竟是如何佈局頁面元素作一定準備而已，如果要想對CSS標準有更深入的具體理解，只有不斷的練習及閱讀理解CSS佈局標準文檔。
七、參考資源
CSS Wiki
CSS Specification
Visual formatting model details
