CSS3 BOX MODEL原理

  • Prototype Hacker Mike Ko #matrixki
  • Nov 11
  • CSS

寫CSS的第一個步驟通常是需要了解選擇器(selector)怎麼使用,

而通常接下來你就會聽到box model這個詞:

box-model-image

[ image source: http://inserthtml.com/codex/css-guide-box-model/]

 

撇開傳統的IE不談,W3C的標準BOX MODEL計算方式為:

外部高度 = content height + padding + border + margin

外部寬度 = content width + padding + border + margin

以及

內部高度 = content height + padding + border

內部寬度 = content width + padding + border

 

舉例來說:http://codepen.io/ph-mike/pen/MYwaNW

 

 

CSS的部分寫上div元素的寬度與高度分別是800px以及600px,這就是所謂的content width, content height,

在未指明padding以及border時,此元素的寬高就是800×600。

 

現在我們來增加border以及padding:

根據上面的算式,此時div的寬度為 800 + 30*2 + 1*2 = 862,高度為 600 + 30*2 + 1*2 = 662 (px),

所以有時候如果你很疑惑為什麼明明寬度設定了800px卻還是超過,不了解box model往往是主要的原因。

 

但有時候padding or border加來加去常讓人搞不清楚到底元素的寬高是多少時,

就換box-sizing進場了。[ box-sizing: 嗨!大家好,就是我 ]

 

box-sizing大致分為兩種

  1. content-box:這個是預設值,也就是上面所述W3C的標準:元素寬 = content width + padding + border
  2. border-box:如果將box-sizing設為border-box時,此時css寫的寬度就是元素的寬度,無需再加上padding or border,因為已經將padding以及border都包含在元素的寬度及高度裡面。

 

我們馬上來將剛剛的例子改寫: http://codepen.io/ph-mike/pen/OPVMMa

你會發現這樣設定後,元素寬度就是你所設定的800px,不會因為padding or border被影響了。

 

而大家常用的bootstrap3 css framework就是使用box-sizing: border-box來幫大家省去麻煩,

不過應該怎麼寫比較方便就交給各位開發者自己去選擇使用囉。