我們前幾篇認識了基本的CSS樣式，了解了文字、邊框、背景怎麼用顏色跟單位數值來設定樣式 ; 接著認識了box model，知道了單一個元素的box結構。

今天，我們要認識的是視覺格式化模型，這是CSS規定boxes在瀏覽器上的排列、以及boxes如何影響彼此位置的規則，了解它，我們才知道怎麼照規則切出我們要的版。

CSS規範對視覺格式化模型的描述：

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

• box dimensions and type

• positioning scheme (normal flow, float, and absolute positioning).

• relationships between elements in the document tree.

• external information (e.g., viewport size, intrinsic dimensions of images, etc.).

上列描述是指，在視覺格式化模型的規則中，每個文檔中的元素會按照box model的結構生成0個至多個box，它們會按照下列規則排版：

• box的尺寸及類型：

  • box尺寸
    我們在box model那篇介紹了box的結構是由content area、padding、border、margin組成，而這些各自區域的數值會影響box如何呈現在瀏覽器上、佔多少的空間。
    

  • 類型（type）
    HTML本身的元素就有block-element與inline-element兩個類型，前者產生block-box佔滿父元素的寬度垂直排列，並且可以設定寬高 ; 後者會產生inline-box不佔滿寬度水平排列，無法設定寬高。
    

    CSS也可以決定元素被顯示的類型，叫display屬性，我們會在之後的筆記認識到。它可以決定元素按照block的方式排列，或是按照inline的方式排列，更有多種類型如inline-block、none、table、list-item等。

• 不同的定位格式（普通流向normal flow, 浮動屬性float，還有絕對定位absolute positioning）

  • normal flow
    我們目前認識到的block排列跟inline排列，以及未來在display屬性即將認識到的參數值都屬於normal flow的範疇。上下垂直排列，左右水平排列都是normal flow的規則。

    在normal flow中的元素透過佔位影響彼此的位置 ; 脫離normal flow的元素，則不影響其它元素的位置，它自己獨立出來，照另一個定位格式運作。

  • 浮動屬性float
    float屬性是脫離narmal flow的定位格式，我們將在之後的筆記介紹float。

  • position: absolute
position也是CSS的屬性，它的其中一個參數absolute是脫離normal flow的定位格式，我們會在position的筆記中介紹absolute及其它參與in flow(in normal flow)的參數值。

• HTML文檔中的順序及層級關係

  • HTML文檔的屬性寫入順序會影響元素的排列順序：
    

  • 層級關係會影響是否繼承樣式、排列位置（例如<table>、<tr>、<td>）。
    <table>是block-element、<tr>是block-element、<td>是inline-element。子元素<tr>在父元素<table>的範圍內垂直排列 ; 子元素<td>又在父元素<tr>的範圍內水平排列：

    <table>
      <tr>
        <td>inline-box</td>
        <td>inline-box</td>
      </tr>
      <tr>
        <td>inline-box</td>
        <td>inline-box</td>
      </tr>
    </table>
    

    

• 其它外在因素 (例如viewport的size、引入的圖片原始尺寸等)

  • viewport的尺寸
    
    切版時，一定要考慮到視口的尺寸，認識目前市面上常用的電腦螢幕規格、ipad或iphone螢幕規格、android手機螢幕規格等，都是很重要的。未來必須掌握的RWD自適應網頁技術，就是讓網頁版型適應各種不同螢幕尺寸。
    這個網站SCREEN SIZ.ES可以看到各種顯示器的物理尺寸、像素值還有使用率。
  • 引入的圖片原始尺寸
    <img>替換元素可以引入圖片，而圖片再被引入之前，就有它自己本來的尺寸。當圖片被引入後，它就會顯示本來圖片的大小，而影響元素的佔位、影響其它元素的位置。

Visual formatting model在CSS規範的篇章非常龐大，這個知識充斥在我們寫入元素的一開始，到後來用CSS屬性去影響佈局，都會牽涉到Visual formatting model，本篇僅筆記基本概念。接下來的幾篇，我們會再介紹切版常用到的基礎佈局，那就明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。