css3 Box model 與 Box-sizing

1、Box Model（盒模型）

　　CSS中的Box Model分為兩種：第一種是W3C的標準模型，另一種是IE的傳統模型。它們的相同之處是對元素的width、height、padding、border、margin以及元素實際尺寸的計算關係，而它們的不同之處則是兩者的計算方法不一致。

　　1）、W3C的標準Box Model：

/*外盒尺寸計算（元素空間尺寸）*/
Element空間高度 = content height + padding + border + margin
Element空間寬度 = content weight + padding + border + margin
/*內盒尺寸計算（元素大小）*/
Element Height = content height + padding + border
Element Weight = content weight + padding + border

　　2）、IE傳統下的Box Model（IE6以下，不含IE6版本）

/*外盒尺寸計算（元素空間尺寸）*/
Element空間高度 = Content Height + margin（Height包含了元素內容高度、邊框高度、內邊距高度）
Element空間寬度 = Content Weight + margin（Height包含了元素內容寬度、邊框寬度、內邊距寬度）
/*內盒尺寸計算（元素大小）*/
Element Height = content Height（Height包含了元素內容高度、邊框高度、內邊框高度）
Element Weight = content Weight（Weight包含了元素內容寬度、邊框寬度、內邊框寬度）

　　目前瀏覽器大部分元素都是基於W3C標準的Box Model，但對於form中的部分元素還是基於傳統的Box Model上，比如：input中的submit、reset、button和select等元素，這樣，如果我們給其設置border和padding，它也只會向內延伸。

2、Box-sizing ： content-box | border-box | inherit

　　1）、content-box：此值為其預設值，其讓元素維持W3C標準的Box Model展示，也就是說元素的寬度（weight）和高度（height）等於元素邊框（border）加上 元素的內邊距（padding） 加上 元素內容的寬度（content width）或高度（content height）

　　2）、border-box：此值讓元素維持IE傳統的Box Model（IE6以下版本）展示，也就是說元素的寬度（weight）和高度（height）等於元素內容的寬度（content weight）和高度（content height）。這裡的content width和content height包含了元素的border、padding、content width和content height

　　box-sizing現在的瀏覽器都支持，但IE家庭里只有IE8以上版本才支持，雖然現代的瀏覽器都支持，但有些瀏覽器還是需要加上自己的首碼，Mozilla需要加上 -moz-，Webkit內核需要加上-webkit-，Presto內核需要加上-0-，IE8需要加上-ms-，所以box-sizing相容瀏覽器時需要加上各自的首碼。

/*Content box*/
Element {
  -moz-box-sizing：content-box;
  -webkit-box-sizing：content-box;
  -o-box-sizing：content-box;
  -ms-box-sizing：content-box;
  box-sizing：content-box;          
}
/*Border box*/
Element {
 -moz-box-sizing：border-box;
 -webkit-box-sizing：border-box;
 -o-box-sizing：border-box;
 -ms-box-sizing：border-box;
 box-sizing：border-box;                  
}