非學不可

【部落格css樣式】 CSS中盒子(box model)的概念和痞客版型解說

 

要開始修改和設計部落格樣式前，css中一個很重要的觀念要清楚，

就是”盒子”，什麼是盒子勒? 我們可以把每個元素視為一個盒子，

而盒子就是以這些屬性組成的。內容、留白、邊框、邊界。

我們可以藉著描述盒子中的這些屬性還有每個盒子間的相關連的設計，來達到排版的效果。

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------

這樣看來很抽像吧，我們只要拿我們熟悉的痞客版型來對照就知道這些屬性到底是在描述哪些部份。

首先來看痞客版型的上方橫幅 #header 這個區塊。

#header{

     background:#ccc ;

     padding:30px;

     border:1px dotted;

     margin:30px;

}

其實部落格的每個區塊就是盒子，而一整個版型可以想成就是盒子和盒子的排列組合，

而我們就是透過設計盒子中的每項屬性，讓每一個盒子排列在一起呈現出一個有美感的版型唷。

----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

盒子box model系列：

【部落格css樣式】盒子box model(1)CSS中盒子的概念和痞客橫幅解說

 

【部落格css樣式】盒子box model(2)設定區塊的寬度和高度

 

 

 

ps：css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範，但無名、天空等各家部落格都是一樣的^^

 

 

部落格設計、網頁設計、平面設計、圖文插畫

部落格設計、網頁設計、平面設計、圖文插畫