[CSS]Box-Sizing

暸解CSS屬性[box-sizing]

我們經常在網路上看別人寫css時，會先設定

  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  

為什麼要將box-sizing的value設定成border-box呢？這是為了方便設計師計算網頁頁面元素的長寬。
先了解一下，一般網頁頁面元素計算大小的公式。
Actual Width of an element = width + padding + border
Actual Height of an element = height + padding + border

先來觀看一個例子︰ 你可以右擊檢查網頁元素來查看他們在網頁上實際的大小。

width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing:content-box;
實際顯示大小卻是 '302x102'

width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: content-box;
實際顯示大小卻是 '402x202'

你是不是發現上面兩個div-box明明設定相同的width和height仁是大小卻不一樣呢？
這就是因為網頁元素沒有把padding及border的大小一拼計算total width和total height再顯示。
border-box的作用是元素的total width and height包含padding and border，令元素大小上的計算不會產生偏差。

box-sizing的所有屬性。[box-sizing]總共有4個屬性︰

box-sizing properyty values:

• content-box: [Default value] 元素的[Width] & [Height]只會包含元素的Content^[1]，不會將[Padding] and [Border]計算在內。
• border-box : 將Content,padding, border的大小都計算在width,height。
• initial: 設定屬性值為元素的原始值，即[Default value](亦即content-box)。
• inherit : 繼承父元素的值。

Notes:[1]:(e.g: text, image etc.)

因為<div>-box元素默認為content-box，若無特別設定不會將padding及border的寬高納入計算。
所以，只要將box-sizing的value設定成border-box就可以令<div>等box元素將將padding及border納入計算了。