發現：
最近在做移動端的東西，說起移動端彈性盒子布局真是無往不利，用起來特別爽，我也是偶爾間發現的這個屬性並且它的用法，在網上基本查不到這個屬性的資料（個人看法）。如果沒有聽說過（display:box）的朋友建議去別人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能聯想到 display:inline 這個屬性，不知道的可以看看我的上一篇隨筆, 之所有在前面加上-webkit-是因為太多人吧inline-box理解成內聯盒子,-webkit是webkit內核的瀏覽器對於css新屬性的實驗性質支持。
概念：
display:box | inline-box 叫做伸縮布局盒模型，這個屬性是最早的版本，但移動端支持的不錯，最新標准時display:flex | inline-flex
我們首先可以這么想 display:inline-box 是一個具有 display:inline特性的並且也具有 display:box 特性的一個組合體，它只能顯示盒子內大小的東西並且可以使用display:box的一系列屬性。
實例：
我們先上一段代碼：
2 * {
3 padding:0;
4 margin: 0;
5 }
6 .content{
7 background-color:#ddd;
8 }
9
10 .content1{
11 background-color: #0f0;
12 }
13
14 .content2{
15 background-color: #0000ff;
16 }
17
18 .content{
19 display: -webkit-box;
20 height: 300px;
21 }
22
23 .content{
24 -webkit-box-orient: horizontal;
25 }
26
27 .content .content2,
28 .content .content1{
29 -webkit-box-flex: 1;
30 }
31
32 .content .content1{
33 width: 40px;
34 }
35
36 </style>
37 <body>
38 <div class="content">
39 <div class="content1">固定的盒子</div>
40 <div class="content2">產品的名稱<br/>產品的介紹</div>
41 </div>
42 </body>
運行以后細心的朋友會發現，我給content1盒子設置了40px的寬度，但是它沒有任何效果，原因是-webkit-box-flex: 1；它補充了左右2個盒子的大小，到這里會有人罵我，"如果想保持這個特性就直接把 content1 加上 display: inline-block 就可以了么，用的着你這樣唧唧歪歪！”
原因
但我想說的是如果我想讓里面的文字垂直居中呢？ 你說你有辦法，我也相信有辦法，但是如果里面的內容是一張圖片呢？如果我們想讓圖片垂直居中，但同時不想讓圖片變形呢？是不是費點勁？肯定會有這樣的需求“左邊圖片，右邊上面是產品標題，下面是產品介紹” 這里我們第一聯想到的就是盒子的pack和align，里面的元素基本上都會垂直居中，於是我們將content1 改成-webkit-box 並且加上box-pack:center; box-align:center;屬性 這個時候我們發現里面的內容確實垂直居中了但是寬度還是沒有變化。
這時候試着將 content1的盒子改成 -webkit-inline-box 我們會驚喜的發現：
1.盒子的大小變成40px了
2.盒子內的文字也垂直居中了
3.帶有inline特點的盒子 竟然能夠改變大小
這時候我們重新總結一下，能夠改變自身大小而且初始化大小只有盒子內容積的第一印象肯定是 inline-block ，這時候我不由的驚嘆了這么好用的特性竟然沒發現很多人在用！我這里我再總結一下。
display : -webkit-inline-box
擁有以下特性：
- 擁有display:inline-block的特性：將對象昂呈遞為內聯對象，但是對象的內容作為塊對象呈遞，旁邊的內聯對象會被呈遞在同一行內，允許空格。 我的粗俗解釋 - 盒子初始化時只能夠容納子元素的容積大小，並且可以改變盒子本身大小。
- 擁有display:box 特性，能夠使用CSS3其內特性
個人覺得運用的合理的話這個屬性特別好用。
最終示例代碼：
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
6 <title></title>
7 <style>
8 * {
9 padding:0;
10 margin: 0;
11 }
12 .content{
13 background-color:#ddd;
14 }
15
16 .content1{
17 background-color: #0f0;
18 }
19
20 .content2{
21 background-color: #0000ff;
22 }
23
24 .content,
25 .content .content2{
26 display: -webkit-box;
27 display: -moz-box;
28 display: box;
29 }
30
31 .content .content2,
32 .content .content1{
33 -webkit-box-align: center;
34 -moz-box-align: center;
35 box-align: center;
36 -webkit-box-pack: center;
37 -moz-box-pack: center;
38 box-pack: center;
39 }
40
41 .content {
42 height: 300px;
43 }
44
45 .content{
46 -webkit-box-orient: horizontal;
47 -moz-box-orient: horizontal;
48 box-orient: horizontal;
49 }
50
51 .content .content2,
52 .content .content1{
53 -webkit-box-flex: 1;
54 -moz-box-flex:1;
55 box-flex:1;
56 }
57
58 .content .content1{
59 width: 300px;
60 height: 100%;
61 display: -webkit-inline-box;
62 }
63
64 .content .content1 img{
65 width:100%;
66 }
67
68 </style>
69 </head>
70 <body>
71 <div class="content">
72 <div class="content1"><img src="3.jpg.680.510.jpg"></div>
73 <div class="content2">產品的名稱<br/>產品的介紹</div>
74 </div>
75 </body>
76 </html>