Display 的幾個(gè)常用的屬性，如下圖：
第一個(gè)是block，是使元素變成塊級(jí)元素，元素會(huì)獨(dú)占一行，塊級(jí)元素寬度默認(rèn)100%，可以設(shè)置寬度width、高度height、填充padding、間距margin的值。
第二個(gè)是inline，是使元素變成行內(nèi)元素，可以與其他行內(nèi)元素共占同一行，不會(huì)獨(dú)占一行，
 不能設(shè)置寬度width、高度height，可以設(shè)置填充padding、間距margin左右的值。
第三個(gè)是inline-block，是使元素變成行內(nèi)塊級(jí)元素，可以與其他行內(nèi)元素共占同一行，元素不會(huì)獨(dú)占一行的，可以設(shè)置寬度width、高度height、填充padding、間距margin的值。
第四個(gè)是none，元素會(huì)隱藏，元素所占的空間也不會(huì)保留。
Display: inline-block 可以搭配vertical-align一起使用，vertical-align的屬性有sub 、super、text-top、text-bottom、middle，對(duì)應(yīng)的屬性的解釋如下圖：

在工作中遇到的項(xiàng)目，有的例如企業(yè)網(wǎng)站的新聞或者產(chǎn)品模塊，如下圖的效果，當(dāng)上新聞圖片或者產(chǎn)品圖片的尺寸不同的時(shí)候，用浮動(dòng)布局去做的話，可能排版會(huì)產(chǎn)生錯(cuò)亂，那么可以用Display:inline-block;
效果如下圖：


css下圖:



父級(jí)元素.order ul需要設(shè)置font-size: 0; 是因?yàn)樾枰嬖诳瞻组g隙的原因，空白間隙的間距是4px, 設(shè)置font-size: 0，就是字體大小為0，那么空白間隙也會(huì)變成0了，這樣就不會(huì)影響下面的排版了。如上所說的產(chǎn)品列表或者新聞列表那里的布局，即使上傳的圖片寬度不同，圖片的設(shè)置是width: 100%; 高度可能不一樣導(dǎo)致布局混亂，就可以用display: inblock; vertical-align: top; 排版就不會(huì)亂，而且是相對(duì)頂端對(duì)齊的。相比用浮動(dòng)布局，float會(huì)使元素脫離文檔流，而且父級(jí)元素的高度會(huì)坍塌，用display: inline-block則不會(huì)。雖然會(huì)有上面說的空白間隙，可以設(shè)置父級(jí)元素字體大小為0就能解決這個(gè)問題，而且能兼容各個(gè)瀏覽器了。所以當(dāng)遇到類似這種產(chǎn)品列表或者新聞列表是水平排列的，用display: inline-block;去做效果挺好，也不需要清除浮動(dòng)或擔(dān)心排版會(huì)錯(cuò)亂。