CSS3 的方塊（Box）模型

* 請使用 Chrome 或是 Firefox 閱讀

在網頁中配置元素的相對位置不是件容易的事，CSS3 導入了方塊（Box）模型簡化了所需的設定步驟。考慮以下的淺灰色的方塊區域，在預設的情形下，黑色方塊配置於左上角的位置。

接下來的這個淺灰色的方塊區域，其中透過方塊模型的配置，將黑色方塊置中配置。

要實現如此的配置，只需將 display 設為 box ，然後進一步設定 pack 與 align 樣式為 center 即可，假設淺灰色的方塊區域為一 div 標籤，其 id="area" ，所需的設定如下：

#area{

    display: -webkit-box ;

    display: -moz-box ; 

    display: -ms-box ;           

    -webkit-box-align:center ;

    -webkit-box-pack:center ;

    -moz-box-align:center ;

    -moz-box-pack:center ;

    -ms-box-align:center ;

    -ms-box-pack:center ;

   

}

除了 center ，還有 star 與 end 可以設定，請自行測試以檢視其效果。

請注意必須配置特定瀏覽器的識別字首。

* 請使用 Chrome 或是 Firefox 閱讀