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 閱讀




沒有留言: