經過幾天身心調養後,我們再回來討論 robinson 這個「玩具」專案。接著我們來看 robinson/src/layout.rs 這個模組。如果你還沒看過本系列的前面部分,建議你先看一下。如果是系列的新讀者,建議你從第一篇開始讀。

還記得瀏覽器的簡易步驟嗎?

DOM tree \
           --> style tree --> layout --> painting
CSS tree /

前幾個步驟我們之前已經講過了。所以接下來要介紹 layout。而這個模組就在實現 layout 的部分。

layout(版面佈局)就是一堆的 box(盒子)。一個盒子是一個網頁的矩形部分。盒子具有寬度、高度和頁面上的位置,形成一個矩形。 這個矩形被稱為內容區,因為內容會呈現在區塊內。內容可以是文字、圖像、影片或其他小盒子。

這張圖片大家應該很熟悉:
box
或是有顏色的可能更熟悉:
box
沒錯,就是你按 F12,在開發者工具中看到的畫面!

box 的周圍也可能會有 padding、borders、margins 等屬性。就像上面兩張圖所顯示的。
W3C也有完整的文件定義。

這邊需要大家對 paddingmargin 有更多了解。雖然我們在實作簡單版的 layout 時不會去處理這些性質,但在真實的瀏覽器中確是至關重要,真正的瀏覽器一點偏差都不能有,能不能將所有 box 處理好,影響最終的結果。

此外像是 scroll、client 等等的功能都會需要好的 box。不然就會發生畫面捲動的位子就會是錯的,瀏覽器本身的視窗大小也不是對的。

以上的幾個連結希望大家能點進去更近一步了解,明天我們來看如何實作。

大家明天見!


關於作者

劉安齊

軟體工程師,熱愛寫程式,更喜歡推廣程式讓更多人學會