你知道回』字有四種寫法，但你知道 display有 32種寫法嗎？今天我們一一道來，讓你一次性完全掌握 display，從此再也不用對它發愁。
從大的分類來講， display的 32種寫法可以分為 6個大類，再加上 1個全局類，一共是 7大類：
外部值內部值列表值屬性值顯示值混合值全局值
外部值
所謂外部值，就是說這些值只會直接影響一個元素的外部表現，而不影響元素裡面的兒子級孫子級元素的表現。
display: block;
這個值大家不陌生，我們最熟悉的
預設就是這個值，最基本的塊級元素，屬於 css入門初學者都知道的概念，只要是容器類型的元素基本都是這個值。除之外，<div>之外，還有 <h1>到 <h6>， <p>， <form>， <header>， <footer>， <section>， <article>天生都是這個值。
display: inline;
這個值大家也不陌生，行內元素嘛，只要是個行內元素都是這個值，最典型的是 ，還有 ， ，以及古代 html語言當中的 ， 都屬於這一類型。
display: run-in;
這個值有點奇怪，通常沒人用它，但你可以知道它。因為除了 IE和 Opera支持它以外，其他所有主流瀏覽器包括 Chrome, Safari, Firefox全都對它置若罔聞。這東西說白了也沒什麼神秘，它的意思就是說如果我們命令一個元素 run-in，中文意思就是『 闖入』！那麼這個元素就直接闖入下一行。比如說這樣：
寫起來大概就是這樣：
aaa bbb .a { font-size: 36px; display: run-in; }
這有什麼用呢？我們拿 span設置 font-size一樣可以實現這個效果，就讓 IE自己跟自己玩去吧！說實話，在人力資源如此寶貴的今天， IE的產品經理不知腦子是不是進水了，不派工程師去實現那麼多比這重要的多得多的特性，卻花時間做這麼個沒用的玩意兒，難道工程師的時間不是金錢嗎？難怪市場佔有率連年下滑。
內部值
談完了外部值，我們來看看內部值。這一組值比較有意思了，在 css3如火如荼的今天，你要玩不轉這些值，怕是哪兒也找不到工作的。內部值主要是用來管束自己下屬的兒子級元素的排布的，規定它們或者排成 S形，或者排成 B形這樣的。
display: flow;
含義不清，實驗室階段產品， Chrome不支持。如果還不夠說服你暫時不要碰它的話，試著理解以下英文原文：
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.display: flow-root;
不同於剛才談到的 flow，現在用 flow-root的漸漸多起來了，因為它可以撐起被你 float掉的塊級元素的高度。外容器本來是有高度的，就像這樣：
<div> <div></div> Example one </div> .container { border: 2px solid #3bc9db; border-radius: 5px; background-color: #e3fafc; width: 400px; padding: 5px; } .item { height: 100px; width: 100px; background-color: #1098ad; border: 1px solid #0b7285; border-radius: 5px; } 結果因為你想讓那一行字上去，於是你給 .item加了一個 float:left;結果就成這樣了，外容器高度掉了，這不是很多人常犯的錯誤嗎？
現在我們給 .container加上 display:flow-root;再看一下：
喏，外容器高度又回來了，這效果是不是槓槓的？
那位同學說，我們用 clear:both;不是一樣可以達到這效果嗎？
.container::after { content: ''; clear: both; display: table; }
小明，請你出去！我們在講 display:flow-root;，不是在講 clear:both;！
display: table;
這一個屬性，以及下面的另外 8個與 table相關的屬性，都是用來控制如何把 div顯示成 table樣式的，因為我們不喜歡 這個標籤嘛，所以我們想把所有的
標籤都換成
標籤。有什麼好？無非就是能自動換行而已，但其實你完全可以做一個
標籤，把它全都替換成 display:block;也可以自動折行，只不過略微麻煩而已。
關於 display:table;的詳細用法，大家可以參考這篇文章，這裡就不細說了。
display: flex;
敲黑板，劃重點！作為新一代的前端工程師，這個屬性你必須爛熟於胸衣中，哦，錯了，是胸中。 display:flex;以及與它相關聯的一系列屬性： flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，並且包括所有這些屬性的取值，都是你需要反覆研磨的。 2009年誕生的這個屬性可以說是不亞於 css界一場蒸汽機誕生一樣的工業革命，它的誕生標誌著馬車一樣的 float被徹底拋進歷史的垃圾堆。
關於它的詳情，會中文的可以參考阮一峰的這篇文章，但我認為，格式編排的更好還是 csstrick上的這篇文章。沒有一張圖能完整地展現 flex的神韻，就放這張我比較喜歡的圖片吧：
display: grid;
會 flex很吊嗎？會 grid更吊哦！也許這就是下次前端面試的重點哦！
grid布局，中文翻譯為 網格布局。學習 grid布局有兩個重點：一個重點是 grid布局引入了一個全新的單位： fr，它是 fraction（ 分數）的縮寫，所以從此以後，你的兵器庫裡除了 px, em, rem, 百分比這些常見兵器以及 vw, vh這些新式武器之外，又多了一樣旁門暗器 fr，要想用好 grid，必須充分掌握 fr。另一個重點是 斜槓操作符，這可不是 分數哦。它表示的是 起始位置和 結束位置。比如說 3/4，這可不是 四分之三的意思，這是指一個元素從第 3行開始，到第 4行結束，但又不包括第 4行。
同樣，與 grid相關聯的也有一大堆旁門屬性，是在學習 display:grid;的同時必須掌握的。包括 grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能詳述，關於這個寫起來又是一大篇文章。詳情還是參考csstrick上這篇文章，講得非常細緻非常清楚。
display: ruby;
ruby這個取值對於我們亞洲人來說其實是非常有用的一個東西，但是目前除了 Firefox以外其它瀏覽器對它的支持都不太好。簡而言之， display:ruby;的作用就是可以做出下面這樣的東西：
很好的東西，對吧？如果可以用的話，對我國的小學教育可以有極大的促進。但可惜我們現在暫時還用不了。
ruby這個詞在英語裡的意思是 紅寶石，但在日語裡是 ルビ，翻譯成中文是 旁註標記的意思，我們中文的旁註標記就是漢語拼音。可以想見，這個標準的制定者肯定是日本人，如果是我們中國人的話，那這個標籤就不是 ruby，而是 pinyin了。還有一個 ruby語言，發明者也是一個日本人，和 html裡這個 ruby是兩碼事，不要搞混了。
ruby的語法大致如下：
display: subgrid;
2015年 8月 6日， W3C的級聯樣式單（ CSS）工作組（ CascadingStyleSheetsWorkingGroup）發布了 CSS網格布局模塊第一級（ CSSGridLayoutModuleLevel1）的工作草案。在這個草案裡規定了上一節我們講到的 display:grid;的方案。而 display:subgrid;是屬於 2017年 11月 9日發布的非正式的CSS網格布局模塊第二級的內容。所以這是一個非常新的草案，並且圍繞它的爭議從來也沒有斷過。
subgrid總的思想是說大網格裡還可以套小網格，互相不影響。但如果 grid裡可以再套 subgrid的話，那我 subgrid裡還想再套 subgrid怎麼辦？ subsubgrid嗎？況且，到底是 grid:subgrid;還是 display:subgrid;這個也沒有達成共識，關於此一系列的爭議，感興趣的同學可以看看這篇文章，英語好的可以看這篇。
列表值
display: list-item;
display:list-item;和 display:table;一樣，也是一幫痛恨各種 html標籤，而希望只使用
來寫遍一切 html的傢伙搞出來的鬼東西，實際使用極少，效果就是這樣：
看，你用
能實現的效果，他可以用實現出來，就是這個作用。
屬性值
屬性值一般是附屬於主值的，比如主值裡設置了 display:table;，就可以在子元素裡使用 display:table-row-group;等等屬性，不過並不絕對。關於它們的作用，主要參考主值就夠了。
display: table-row-group;
詳情參考display: table;。
display: table-header-group;
詳情參考display: table;。
display: table-footer-group;
詳情參考display: table;。
display: table-row;
詳情參考display: table;。
display: table-cell;
詳情參考display: table;。這個屬性有必要詳細說說，因為它完全可以單獨應用，用在高度不固定元素的垂直居中上，詳情請見張鑫旭的這篇文章。效果如下圖所示：
display: table-column-group;
詳情參考display: table;。
display: table-column;
詳情參考display: table;。
display: table-caption;
詳情參考display: table;。
display: ruby-base;
詳情參考display: ruby;。
display: ruby-text;
詳情參考display: ruby;。
display: ruby-base-container;
詳情參考display: ruby;。
display: ruby-text-container;
詳情參考display: ruby;。
顯示值
MDN裡把它叫做values（ 盒子值），我把它叫做 顯示值，主要是為了便於理解。
display: contents;
這大概是 2018年年初最令人喜大普達的一件大事了：Chrome 65版本終於要支持display: contents;了！ Firefox早就支持了，而 Chrome直到現在才開始支持，這麼重要的特性，它到底有什麼功能呢？結果恐怕會令你大失所望。原來的布局是這樣的：
你給中間那個 div加上 display:contents;之後，它就變成這樣了：
這就是 display:contents;的作用，它讓子元素擁有和父元素一樣的布局方式，僅此而已。
display: none;
這麼著名的值還用多說嗎？
混合值
display: inline-block;
關於 display:inline-block;的作用恐怕只要做過 3天以上前端的工程師都應該知道。什麼也不說了，上一張著名的圖片作總結吧：
display: inline-table;
你要能理解 inline-block，你就能理解 inline-table。在行內顯示一個表格，就像這樣：
display: inline-flex;
這個就不用多說了吧？跟上面一樣，在行內進行彈性布局，參考display: flex;。
display: inline-grid;
同上，在行內進行網格布局，參考display: grid;。
全局值
這些值不是 display屬性的專利，幾乎其它任意屬性都可以用，列在這裡湊個數。
display: inherit;
繼承父元素的 display屬性。
display: initial;
不管父元素怎麼設定，恢復到瀏覽器最初始時的 display屬性。
display: unset;
unset混合了 inherit和 initial。如果父元素設值了，就用父元素的設定，如果父元素沒設值，就用瀏覽器的預設設定。直接看圖最明白：
總結
以上就是在 css裡 display的 32種寫法。談了這麼多，不知道你記住了多少呢？其實，單純理解每一個 display屬性的取值都不難，難的是融會貫通，在恰當的地方運用恰當的值，畢竟我們的目的是為了把代碼寫短，而不是把代碼寫長。如果你怕記不太清的話，就請你收藏這篇小文，也許將來的某一天，你會用得著。