什么是盒子模型？
把所有的網頁元素都看成一個盒子，它具有：
content，padding，border，margin
四個屬性，這就是盒子模型。
盒子模型有兩種形式：標准盒子模型，怪異盒子模型
首先，兩種模式可以利用box-sizing屬性進行自行選擇：
標准模式：box-sizing:content-box;
怪異模式：box-sizing:border-box;
兩種模式的區別：
標准模式會被設置的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。
例：
.box{
box-sizing:border-box; //沒有添加時，按照標准模式計算， 添加時按照怪異模式解析
width:200px;
height:200px;
border:2px solid black;
padding:50px;
margin:50px;
}
標准模式：盒子總寬度/高度 = 內容區寬度 /高度+padding+border + margin。效果：
怪異模式：盒子總寬度/高度 = width/height + margin。效果：
