CSS3 BOX MODEL原理

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

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

[ 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

<div class="box-model">
  <h1>800x600</h1>
</div>

 

.box-model{
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
}

 

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

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

 

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

.box-model{
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
  padding: 30px;
  border: 1px solid #000;
}

根據上面的算式，此時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

.box-model {
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
  padding: 30px;
  border: 1px solid #000;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

 

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

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