計算 browser 的 layout

by thinker

關鍵字:

前兩天的linkname:[多欄編排] http://heaven.branda.to/~thinker/GinGin_CGI.py/show_id_doc/138 、linkname:[多欄編排之二] http://heaven.branda.to/~thinker/GinGin_CGI.py/show_id_doc/139 ，引出了 browser 如何 layout 這些物件的問題。當 $javascript$ 程式在計算每一個物件的高度時，發覺和實際 render 結果有很大的差異。一般我們計算 DOM 物件的高度時，是使用 node.offsetHeight 來計算，這個值是包括 border-width、padding 和 content 的高度。

[attach:box.png]

這張圖清楚標示出一個 box 的成份。而 node.offsetHeight 是指，從 top border (TB) 的最上緣，至 bottom border (BB) 的最下緣，之間的距離。因此，只是以 node.offsetHeight 計算高度是不夠的，必需加入 margin 的高度。

[attach:box-rock.png]

之前，我認為 margin 是固定在 border 外綠的，為了在 border 外留白。也就是相鄰兩 box A、B， border 外緣間的距離是 box A 的 margin 加上 border B 的 margin。換句話說，box 的完整大小，是 content + padding + border + margin A + margin B。但實際狀況更複雜。

[attach:box-height.png]

兩個 box 上下相疊時，兩個 box A、B 的 border 外緣間距離，並不是 margin of A + margin of B，而是 max(margin of A, margin of B)。因此，計算一列 box 的高度或寬度時，必需計算 box 的 margin，取相鄰兩者之間的間距。

== 計算 margin 的方式 ==
gecko 可使用 window.getComputedStyle() 計算，而 IE 可用  node.currentStyle[...] 計算。

請參考:
 * linkname:[Get the rendered style of an element] http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
 * linkname:[DOM:window.getComputedStyle] http://developer.mozilla.org/en/docs/DOM:window.getComputedStyle

最後更新時間: 2006-09-24 13:21:03 CST | 引用

查詢:

COMMENTS: