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

上一篇講過盒子(box model),想畢大家都比較知道盒子在css中到底是怎麼應用了。

接下來要介紹的是寬(width)和高(height)的設定。

盒子2.jpg  

一般來說在box裡面寬(width)是指左內緣到右內緣,高(height)是上內緣到下內緣。(如圖示)

由寬、高、留白和邊界的組合形成了整個版面的設計。

 

在設計版型時有時候會覺得怎麼好像差了一點偏了些,那是因為對div組件裡的寬高設定有誤解,

設定寬和高是指裡面的上...右內緣。留白(padding)、邊界( margin)還有邊框(border)都是會增加額外寬度的。

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

例如需要橫幅寬度設880px,設定width:880px;,只有內容(content)的部份。

 

#header{
background:#ccc ;
width:880px;
}

(↓範例)

5.jpg  

看到的橫幅寬度是這樣的,但是因為考慮到要設定留白(padding)10px,但是又希望要讓他看起來一樣總寬是880px

那就要減掉左右的10px所以寬要設860px,這樣整個橫幅總寬度才會是880px

如果設定了寬度(width)880,留白(paddind)又設定了10px,那樣加起來就變900px。

 

#header{background:#ccc ;
width:860px;
padding:10px;
}

(↓範例)

6.jpg  

 

 

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

 

 

簡單來說看見的寬度是包括額外的部份,假設寬設100px但是在邊界左右各設了10px,那看到的會是content和padding共120px,

在區塊中設的寬高是設定上.下.左.右內緣,但實際看到的會是加上.下.左.右外緣。

 

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

 

盒子box model系列:

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

 

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

 

 

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


創作者介紹

非學不可

鹿老師 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • Paggie
  • 請問我想將又鞭側蘭的寬度加寬 不知道要怎麼改好?
    謝謝你~
找更多相關文章與討論