在學習什麼是盒子模型之前，首先我們應該知道，在我們的css中所有的元素都是成盒子模型的。接下來就讓我們看看什麼是盒子模型，如下圖

在我們的css中，所有的元素都是一個個向上圖一般的盒子形狀，由內容（該部分便是我們自己定義的寬高）、內邊距（padding）、邊框（border）、外邊距（margin）四部分組成。其中內容部分由建立之初自己通過屬性width、height進行定義，如果我們沒有進行定義則是由我們元素中的內容決定的，padding、border和margin預設都為0。

以上便是盒子模型的概念，接下來我們瞭解一下盒子模型相關的屬性

• width：盒子的寬度，是內容部分的寬度，不包括padding等
• height：盒子的高度，也是內容部分的高度

• padding：盒子的內邊距
• border：盒子的邊框

• margin：盒子的外邊距
• background：盒子的背景（可以設定顏色、圖片等），背景的範圍為邊框的範圍，它是在盒子的底層的，所以當我們的邊框有顏色時，會將我們的背景給遮住

• color：內容的顏色，我們網頁的內容無非就是圖文兩種形式，所以color定義的也就是文字的顏色

以上就是我們盒子模型最基本的屬性了，當然屬性還有很多，這裡就不一一列舉了

我們使用left、right、top、bottom來定義盒子的四個方向，與屬性結合可以定義盒子不同方向上的邊距、邊框。也可以用來進行定位和佈局（不建議）。例如（padding-left盒子的上內邊距）

注意：請謹慎使用盒子的margin，因為有可能導致元素間的margin重合，這是css的bug。當然也有解決辦法，大家可以自行去網上查詢方法，這裡就不進行介紹了。

當我們為盒子設定background來進行頁面顯示時，我們的background的範圍為邊框的部分，所以當我們使用padding的時候會將我們的頁面撐大。