作為一個廣受好評的瀏覽器引擎，其網頁布局的質量(包括速度、效率、符合標準度等)往往是其關鍵，那么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等標簽及text node對應的元素則缺省為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、content width/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，其Containing Block布局容器元素為最近的祖先block-level元素，其屬性left、top、right、bottom不起作用；

position屬性為relative的元素同static屬性元素一樣，但其left、top等屬性可以有效，其坐標相對于布局容器而言；

position屬性為absolute的元素的布局容器元素是最近的除了其屬性不為static的祖先block-level元素；

position屬性為fiexed的元素的布局容器元素是往往是根布局容器，但其定位坐標需要根據ViewPort的位置作相應調整；

一 旦確定了其Containing Block布局容器，同時結合其自身的block-level或inline-level特性，布局時根據block flow和inline flow規則就可確定其起始位置，其中inline-level元素可在其布局容器提供的區域內自動換行；而block-level元素可在其布局容器提供的區域內自動換一個段落。

另外float屬性為left或right元素較為特殊，則不遵守上面的規則，該元素讓在其高度范圍內的其他元素始終在其左邊或右邊。

四、如何確定頁面元素大小
對 于有定義其寬高的頁面元素，則按照其定義的寬高來確定其大小，而對于象text node這樣的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布局標準文檔。

?

轉自http://hi.baidu.com/liangyj/blog/item/edecdd333e57afff1a4cffcc.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的WebKit 布局的标准和概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。