捐血一袋救人一命

2015年8月28日 星期五

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 參數:

2015-08-28_150746

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 的。

反應:

0 意見: