CSS2.1中提出了盒模型的概念，盒模型高度提煉了所有元素的基本特徵，即標準盒模型，CSS3中進一步擴展，提出了彈性盒模型的概念
什麼是盒模型，我們可以先直觀的看一個東西
打開Chrome瀏覽器，F12打開開發者工具 
我們能看到這個東西
margin,padding,border，平常我們在設置這些屬性的時候就是盒模型的一個應用~
盜一張圖來說明 
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的
Border(邊框) - 圍繞在內邊距和內容外的邊框
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的
Content(內容) - 盒子的內容，顯示文本和圖像
以實際的例子說來說明：
<!doctype html><html><head><meta charset="UTF-8"><title>box</title><style type="text/css">body{ color:#FFF; /*文字爲白色*/
background:#edf5f9; /*淺灰藍色*/
position:relative;}.box{ position:absolute; background:#2980B9; /*深藍色*/}h1{ background:#3498DB; /*淺藍色*/}}</style></head><body>
<div class="box">
<h1>box</h1>
</div></body></html>1234567891011121314151617181920212223242526272829這段代碼準備了一個類名爲box的div元素，以及div元素中的h1元素
效果： 
最外面的，最淺的灰藍色是body的背景顏色，不用管，設置這個只是想修改body的默認白色屬性，以便觀察盒子~
藍色的就是box類設置的背景顏色，淺藍色就是h1設置的背景顏色~
現在來設置padding屬性
修改h1的代碼：
h1{ background:#3498DB; /*淺藍色*/
padding:20px;}1234
淺藍色部分增加了~從文字到h1的邊界的距離增加了，也就是內邊距增大了，這是padding屬性
現在來設置margin屬性
修改h1的代碼：
h1{ background:#3498DB; /*淺藍色*/
padding:20px; margin:20px;}12345
明顯看到，深藍色部分變大變寬了，是h1的邊界到div的邊界增大了，也就是外邊距增大了，這是margin屬性
現在來設置border屬性
修改h1代碼
h1{ background:#3498DB; /*淺藍色*/
padding:20px; margin:20px; border:5px solid #FFF;}123456
可以明顯的看到淺藍色和深藍色中間多了一層白色的邊框，這就是h1的邊框，這是border屬性
然後我們來說說盒子的大小問題
我們先修改h1的代碼
h1{ background:#3498DB; /*淺藍色*/
padding:20px; margin:20px; border:5px solid #FFF; width:120px; height:120px;}12345678添加高度和寬度屬性~
效果如圖： 
我們F12打開開發者工具，查看盒模型 
可以清楚的看到盒子的大小爲210x210
可是我們設置的是120x120啊，爲什麼變了，這就是爲什麼我們要學習盒模型的原因。。
這個210是20的margin,5的border,20的padding,左右兩邊加起來x2，總共90，加上120就變成210了…
所以width和hegiht屬性只作用了content區域…
爲了解決這種每次設置長寬都要計算的問題，就需要用box-sizing屬性~
修改h1的代碼:
h1{ background:#3498DB; /*淺藍色*/
padding:20px; margin:20px; border:5px solid #FFF; width:120px; height:120px; box-sizing:border-box;}123456789
再看效果就OK了~
添加了一個box-sizing屬性，這個屬性定義了盒模型中元素的組成元素。默認的box-sizing屬性是content-box，寬高屬性不計入內邊距及邊框的數值。變爲border-box之後，元素先減去邊框和內邊距才計算內容。
另外，設置絕對定位是爲了觸發BFC機制來清楚浮動，更好的觀察盒模型。
BFC：塊級格式化上下文
簡單的來說，在BFC中，元素佈局不受外界的影響，利用這個來消除浮動元素對非浮動元素的影響，以及塊級元素和行內元素的影響。
關於IE盒子模型
其實，IE盒子模型與標準盒模型差不多，區別在於：計算方式
這裏盜兩張圖 
可以很明顯的發現，兩張圖的區別在width和height
標準盒子模型中，width和height是content的長與寬
而IE盒子模型中，width和height是content+padding+border區域的長與寬
很明顯，與剛剛說的box-sizing屬性相對應
content-box 對應標準盒子模型
border-box 對應IE盒子模型
em….怎麼說呢，感覺就是W3C的一羣大佬罵了很久IE的盒子模型最後發現IE的盒子模型還挺好的，就在Html5加入了box-sizing屬性…..
彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒子，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
box-align 定義子元素在盒子內垂直方向上的空間分配方式
2.box-direction 定義盒子的顯示順序
3.box-flex 定義子元素在盒子內的自適應尺寸
4.box-flex-group 定義自適應子元素羣組
5.box-lines 定義子元素分列顯示
6.box-ordinal-group 定義子元素在盒子內的顯示位置
7.box-orient 定義盒子分佈的座標軸
7.box-pack 定義子元素在盒子內水平方向的空間分配方式
不過彈性盒子的屬性還存在兼容性問題..
所以用彈性盒子寫代碼可能會比較頭疼，各主流瀏覽器都有各自的私有屬性…
比如說webkit引擎的chrome和safari，他們的屬性都帶有-webkit前綴，比如說-webkit-box-orient
IE就算了，IE根本不支持這個….
開啓彈性盒模型只需要設置display:flex就OK了
然後再去設置具體的屬性
原文：http://blog.csdn.net/qq_33858965/article/details/77969174?locationNum=4&fps=1