CSS 視覺格式

視覺化格式化模型通常解釋如何處理文件樹中的元素以用於諸如計算機螢幕之類的可視媒體。

CSS 視覺格式模型

CSS 視覺化格式化模型是用於處理可視媒體的文件的演算法。在視覺化格式化模型中,文件樹中的每個元素根據框模型生成零個或多個框。

這些盒子的佈局取決於以下因素:

  • 盒子尺寸。
  • 元素的型別(塊或內聯)。
  • 定位方案(正常流,浮動絕對定位)。
  • 文件樹中元素之間的關係。
  • 外部資訊,例如視區大小,影象的內建尺寸等。

注意: 文件樹是源文件中編碼的元素的層次結構。文件樹中的每個元素都只有一個父元素,但根元素除外,它沒有。

CSS 中生成的框的型別

網頁上顯示的每個元素都會生成一個矩形框。以下部分描述了元素可能生成的框的型別。

塊級元素和塊盒

塊級元素是視覺化為塊的元素(即佔據可用的全寬),在元素之前和之後使用換行符。例如,段落元素( <p>),標題(<h1> to <h6>),分割槽(<div>)等。

通常,塊級元素可以包含內聯元素和其他塊級元素。

內聯級元素和內聯框

內聯級元素是源文件中不構成新內容塊的元素; 內容按行分發。例如,段落(<em>),spans(<span>),加重元素(<strong>)等中強調的文字片段。

內聯元素通常只包含文字和其他內聯元素。

注意: 與塊級元素不同,內聯級元素僅佔用所需的寬度,並且不會強制換行。

你可以使用 CSS 顯示屬性更改元素在網頁上的顯示方式。你將在下一章中瞭解顯示屬性。