（譯）haslayout 綜述（一）

阿不暈發表於2011-09-03

原文地址http://msdn.microsoft.com/en-us/library/bb250481(v=vs.85).aspx

作者：Markus Mielke （Microsoft Corporation）

``什麼叫做"HasLayout"，為什麼它很重要？

一些IE下的bug可以通過啟用元素的"layout"（一種IE內建的資料結構）來得到解決（例如， dimensional bug fixes和 Holly hack），但是為什麼要給元素加上一個"layout"的資料結構，實際上大多數使用者並不瞭解。這篇文章解釋了當一個元素擁有"layout"之後會有什麼變化，以及設定"layout"的原因。

首先，我們從分析元素的型別開始，頁面中通常有兩類元素：

  1. 依賴父元素來進行尺寸計算和內容定位的元素
  2. 可以自身進行尺寸計算和內容定位的元素

總體來說，在DHTML中，大部分元素屬於第一種元素，DHTML引擎不支援元素對自身尺寸和內容進行計算，雖然像div和p這樣的元素在文件流和優先順序規則中擁有自己的定位，但是其內部元素的佈局還是依賴與其最近的擁有佈局的祖先元素（通常是body）來進行。這些元素通過祖先元素的佈局來進行自身內部複雜的尺寸計算和內容編排。

Note：擁有佈局影響力的元素不一定是元素直接的父元素，有可能是其祖先元素，放棄讓每一個元素擁有佈局的好處在於其簡潔性，從而提高了頁面效能。

所以，什麼叫做"擁有了佈局"？

  • 簡單來講，擁有了佈局是指一個元素擁有了對自身（甚至其所有子元素）的尺寸和定位進行計算的能力（如果它的其中一個子元素擁有自己的佈局，這個子元素將負責計算自己及其子元素的尺寸，但是該子元素的定位會受其父元素的影響）

  • 一些擁有“固定”尺寸的元素，和一些比較特殊的具有預設尺寸約束的元素，通常會擁有佈局，例如，button，images，inputs，selects，和marquee等元素，這些元素即使沒有設定寬高，也會擁有自身預設的尺寸。

  • 有一些元素不像一般元素那樣來獲取Layout，比如div和span，它們會有一些特殊的屬性來激發layout，從而來獲得另外的特性，比方說，一些元素通過獲得佈局來擁有滾動條特性。
  • 元素一旦擁有了佈局，元素的"hasLayout"屬性就被設定成true（可以通過工具檢視到）。

為什麼擁有佈局很重要？

  • 它會將元素限制在一個矩形的盒子內，從而保證元素的內容不會分散到另一個盒子周圍，例如，在IE引擎中，一個擁有佈局邊框的元素不會環繞相鄰的浮動元素。

  • 擁有佈局的元素會建立起一個新的塊級上下文（block formatting context）（有關BFC的解釋可參考這篇文章白話Block Formatting Context）

  • 由於佈局使得瀏覽器渲染引擎要額外地在記憶體中呼叫演算法來計算元素尺寸和方位，所以它並不輕量，它會消耗更多的記憶體，並可能導致效能的下降。

  • 但是會產生元素無法自適應的副作用，一個擁有佈局的元素不會“自動縮小”來適應其子元素，所以，一個絕對定位的盒模型如果有一個擁有佈局的子元素，它是不會自動縮小來適應這個子元素的。

  • 一個盒模型會被子元素給撐開（IE6下的heigh bug）

  • 人們通常利用layout來解決IE6bug，特別是與相對定位元素有關的，但實際上，相對定位元素不需要擁有layout，如果讓它們擁有layout在一些情況下反而會產生問題。

（未完待續）

相關文章