width 寬度： 指的是真實內容的寬度，不是盒模型的寬度。
height 高度： 盒子裏面內容的高度，不是指盒子的高度。
padding 內邊距（盒子裏面的留白）。
border 指的是盒子邊框的大小。
margin 盒子外邊距。（一個盒子和另外一個盒子的關係）
width和height 描述的是真實內容的寬和真實內容的高。
盒子的寬度和真實的佔有度不是一回事。
以上圖爲例：
盒子的內容width：200px height:200px 但真實的寬高卻是302*302 ，這是因爲還要加上內邊距（padding），還有邊框（border）大小。
如果要求一個盒子的真實佔有像素 公式爲 左border+右border+width+左padding+右padding.
如果想保持一個盒子的真實佔有不變，那麼加width就要減padding（width +2 padding-1），加了padding就要減width。 （padding+1 width-2）
一、關於padding。
padding區域都是有背景顏色的，也就是說backgroud-color將填充所有boder以內的區域！！
padding 是有四個方向的，分別可以描述四個方向的padding。
在css中有兩種定義padding的方式，分別是直接用小屬性，或者用空格隔開，例如：
padding-left: 100px;
pandding-right: 20px;
padding-top: 30px;
padding-bottom: 40px;
或者用以下方式定義，通過空格分開，上右下左：
padding：30px 20px 40px 100px；
其實有一些html元素標籤默認就帶有padding，比如ul標籤。所以在編寫html代碼的時，默認都會加一個默認的選擇器，把margin和padding都清除。
*{
margin: 0;
padding: 0;
}
二、border邊框。
border有三個要素，分別是粗細，線形，顏色。
例：
boder: 10px ridge red;
另外一種寫法就是：
border-width: 10px;
border-style: solid;
border-color: red;
按照方向拆分：
border-top：10px solid red;
border-right:10px solid bule;
border-left: 10px solid yellow;
border-bottom: 10px solid green;
甚至可以拆的更詳細：
將每個方向的每個元素都拆開。
如果想讓邊框消失，可以使用border:none 或者boder:0，他們兩個作用一樣。
如果想讓某一個方向的邊框消失border-left:none；或者border-left:0；。