【公告】網站目前停止所有的課程訂閱服務,除了 7 月底預計完成上線的 KBF 餘下課程影片,將不會再新增其它課程內容,原有學員權益不受影響,造成不便還請見諒,我們正在開發以 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供更好的課程訂閱服務,感謝學員的支持。

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




沒有留言: