快速模式下的版面配置基礎

度量單位和位置屬性可透過 DHTML 文件物件模組 (DOM) 取得,且當作階層式樣式表屬性提供。您可以使用 DHTML DOM 屬性,以程式設計方式設定階層式樣式表屬性。透過 DHTML DOM 公開的屬性,會根據元素在文件中的呈現方式傳回值。階層式樣式表屬性會根據其他階層式樣式表屬性的預設值傳回值。

元素方塊

網頁上的每個可見元素會在文件中佔據絕對空間量。元素佔據的空間大小是由元素矩形或方塊所定義。元素矩形包含所有的版面配置和顯示屬性以及任何內容。

在上一個圖形中,marginborderpadding 屬性顯示在泛型元素的內容周圍。"Element Width" 表示元素內容的寬度,而 "Box Width" 表示內容的寬度再加上版面配置屬性佔據的其他空間。元素及其版面配置屬性的高度也能夠以類似的方式表示。

區塊元素與內嵌元素的比較

所有可見的 HTML 元素會以區塊或內嵌方式顯示。區塊元素 (如 DIV 元素) 通常會開始新行,並根據父容器的寬度來調整大小。內嵌元素 (如 SPAN 元素) 通常不會開始新行,且會根據其本身內容的高度和寬度來調整大小。

元素的大小、版面配置和位置

當下列其中一個條件成立時,元素便具有版面配置:

  • 元素有指定的高度和/或寬度。

  • 元素是內嵌區塊元素 (display: inline-block)。

  • 元素有絕對位置 (position: absolute)。

  • 元素是浮動元素 (float: leftfloat: right)。

  • 元素是表格元素。

  • 元素是轉換元素 (style="zoom: 1")。

幾乎所有內嵌和區塊元素都具有版面配置。唯一的例外是未定位且未指定高度或寬度的內嵌元素。

定位元素具有特定度量單位,且可使用階層式樣式表版面配置屬性 (toprightleftbottom) 設定為某個位置。未定位元素的位置會相對於其具有版面配置的最近上階。將一或多個元素移至文件內的相對或絕對座標時,位置會很有用。它也可用於建立特定文件樣式。

另請參閱

概念

階層式樣式表參照
屬性 (依名稱)
精確模式中的度量單位和位置屬性