盒子模型
html文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（内邊距），content（内容區域）。
盒子的兩種初始狀态
1.類似div的盒子一個盒子自動占據一行
特點：可以設定固定的寬高，margin，padding。
2.類似span盒子一個盒子中的内容會跟同類的盒子并排在一行出現-----類似文字的表現特性。
特點：寬高不能設定，而是由其内容“撐出”，margin和padding沒有上下方面的表現。
盒子模型分類
盒子模型分為W3C标準盒子和IE盒子兩種，如下圖所示，
W3C标準盒子：盒模型的寬高隻是内容（content）的寬高，box-sizing:content-box;
IE盒子：盒模型的寬高是内容(content)+填充(padding)+邊框(border)的總寬高。
box-sizing:border-box;
padding
padding指盒子的内補間。“補間”這個詞比較術語化，我們不妨将其了解為快遞盒子内
快遞商品外包裹的那層起保護作用的海綿。隻是在 CSS 中，這個“海綿”預設是透明的。在現實世界中，海綿不會影響盒子的尺寸，但在 CSS 世界中，尺寸規則就有所不同了。
margin
padding 性格溫和，負責内間距；而 margin 則比較激進，負責外間距。雖然都是間距，但是差别相當大，尤其是 margin，特異之處相當多。
“外部尺寸”有個很不一樣的特性，就是尺寸的大小有可能是負數，沒錯，負尺寸。這和我們現實世界對尺寸的認知明顯沖突了，因為現實世界沒有什麼物體的尺寸是負的。是以，我總是把“外部尺寸”了解為“元素占據的空間尺寸”，把概念從“尺寸”轉換到 “空間”，這時候就容易了解多了。
border
顧名思義，border 就是“邊框”，從名字就可以看出來 CSS 設計者設計此屬性的目的就
是給元素弄個邊框什麼的。
盒子補充
1：隻要是盒子，在盒子内部都會有布局流，也就是流式布局
2：在寫頁面布局的時候，盡量利用布局流，因為在使用布局流時候 父元素高度可以由子元素撐起來，可以避免相容性問題
3：如何搭建盒子與盒子之間的關系，更加重要