通過對日常生活中的盒子和網頁中單個模塊內部結構的分析，我們發現它們的結構是非常類似的，由外到內分別是：外邊距、邊框、內邊距、內容。是用來佈局網頁的重要容器。網頁佈局中的盒模型運用是非常廣泛的，所有頁面中的元素都可以看成是一個盒子，佔據着一定的頁面空間。
二、盒模型基本結構：
邊框（border）、內邊距(padding)、外邊距(margin)、寬度(width)、高度(height)等。
*width、height（可設固定值或百分比，如果設百分比則是佔據父級容器的百分比）
*margin：margin-top/margin-bottom/margin-left/margin-right（可設負值）
*padding：padding-top/padding-bottom/padding-left/margin-right
*border：border-top/border-bottom/border-left/border-right
四、盒模型的簡寫形式：
按照規定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區別，具體含義如下：
*如果給出2個屬性值，前者表示上下邊框的屬性，後者表示左右邊框的屬性；
*如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，後者表示下邊框的屬性；
*如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。
五、盒模型的其他相關屬性：
*溢出：
overflow:hidden、visible、auto、scroll
*可見性：
visibility: visible、hidden
*呈現：
display：none、inline、block、list-item、table-cell等
Display:none與visibility: hidden的區別
使用 visibility:hidden屬性會使對象不可見，但該對象在網頁所佔的空間沒有改變（看不見但摸得到），等於留出了一塊空白區域，而 display:none屬性會使這個對象徹底消失（看不見也摸不到）。