CSS div 切版的問題

網頁設計中，會經常用到 div 來切版面。

在設計新手經常會無法理解，為什麼版塊會跳行、超出，永遠不如自己想像的那樣。

所以要理解 Box Model。

在W3C 定義的 Box Model ，它的寬度(width)及高度(height)，是不包含邊框線寬度(border)，也不包含留白(padding)的部份，只有內容的部份。

也就是說，利用 div 劃分出來的版面，實際寬度 = maring + border + padding + width。

同理，實際高度 = margin + border + padding + height。

所以如下的設定，預設會造成版塊跳行。

新手會很困擾，為什麼外框 100%，內框是兩個 50%，加起來不是超出版面寬度，出現捲軸，破壞畫面，再不然就是內框跳到下一行，同樣也是破壞了版面。

會以為一定要用 Javascript 去計算寬高，自行來指定寬高點數。

其實不需要這麼麻煩，只要指定 CSS 的參數：box-sizing 即可。

下圖來解釋 box-sizing 參數：

box-sizing:content-box → width 及  height 是指橘色方塊的寬度及高度

box-sizing:padding-box →指黃色方塊的寬度及高度

box-sizing:border-box →指淡綠色方塊的寬度及高度

預設是用 content-box。

當你指定 box-sizing:border-box時，它包括 border + padding + content

當你指定 box-sizing:padding-box時，它只有 padding + content

所以要注意了，如果有指定 margin，就會造成版塊超出預想的寬高，box-sizing 也救不了。

如果一定要用 margin，可以利用 calc() 來計算 width / height。

在 IE 5.5 ，width & height 是包含 border & padding 的。