是你 使用 阮一峰 body 目前 emp -c 有用 一個

你一定不敢相信display有32種寫法，今天我們就一一道來，讓你一次性掌握display

從大的分類上講，display的32種寫法可以分為6個大類，再加上一個全局類，一共是7個大類：

1 外部值

2 內部值

3 列表值

4 屬性值

5 顯示值

6 混合值

7 全局值

一 外部值

所謂外部值，就是說這些值只會直接影響一個元素的外部表現，而不影響元素裏面的兒子級孫子級元素的表現。

display: block;

這個值大家不陌生，我們最熟悉的 <div>缺省就是這個值，最基本的塊級元素，屬於 css入門初學者都知道的概念，只要是容器類型的元素基本都是這個值。除 <div>之外，還有 <h1>到 <h6>， <p>， <form>， <header>， <footer>， <section>， <article>天生都是這個值。 display: inline;

這個值大家也不陌生，行內元素嘛，只要是個行內元素都是這個值，最典型的是 <span>，還有 <a>， <img>，以及古代 html語言當中的 <b>， <i>都屬於這一類型。 display: run-in;

這個值有點奇怪，通常沒人用它，但你可以知道它。因為除了 IE和 Opera支持它以外，其他所有主流瀏覽器包括 Chrome, Safari, Firefox全都對它置若罔聞。這東西說白了也沒什麽神秘，它的意思就是說如果我們命令一個元素 run-in，中文意思就是『 闖入』！那麽這個元素就直接闖入下一行。

二 內部值 內部值主要是用來管束自己下屬的兒子級元素的排布的。 display: flow;

含義不清，實驗室階段產品， Chrome不支持。 display: flow-root;

不同於剛才談到的 flow，現在用 flow-root的漸漸多起來了，因為它可以撐起被你 float掉的塊級元素的高度。外容器本來是有高度的，就像這樣： 代碼： <div class ="container container1"> 　　<div class = "item"></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;再看一下：

當然清除浮動也可以達到這樣的效果

.container::after {

　　content: ‘‘ ;

　　clear: both;

　　display: table;
}

display: table;

這一個屬性，以及下面的另外 8個與 table相關的屬性，都是用來控制如何把 div顯示成 table樣式的，因為我們不喜歡 <table>這個標簽嘛，所以我們想把所有的 <table>標簽都換成 <div>標簽。 <div>有什麽好？無非就是能自動換行而已，但其實你完全可以做一個 <table><tr><td>標簽，把它全都替換成 display:block;也可以自動折行，只不過略微麻煩而已。

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;的作用就是可以做出下面這樣的東西： 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標簽，而希望只使用 <div>來寫遍一切 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裏把它叫做 <display-box>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。如果父元素設值了，就用父元素的設定，如果父元素沒設值，就用瀏覽器的缺省設定 就介紹到這裏了

css3 display 詳解