display的32種寫法

你知道『回』字有四種寫法，但你知道display有32種寫法嗎？今天咱們一一道來，讓你一次性徹底掌握display，今後不再用對它發愁。

從大的分類來說，display的32種寫法能夠分爲6個大類，再加上1個全局類，一共是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，中文意思就是『闖入』！那麼這個元素就直接闖入下一行。好比說這樣：

寫起來大概就是這樣：

<div class="a">aaa</div>
<div class="b">bbb</div>
.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 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;再看一下：

喏，外容器高度又回來了，這效果是否是槓槓的？

那位同窗說，咱們用clear: both;不是同樣能夠達到這效果嗎？

.container::after {
    content: '';
    clear: both;
    display: table;
}

小明，請你出去！咱們在講display: flow-root;，不是在講clear: both;！

display: table;

這一個屬性，以及下面的另外8個與table相關的屬性，都是用來控制如何把div顯示成table樣式的，由於咱們不喜歡<table>這個標籤嘛，因此咱們想把全部的<table>標籤都換成<div>標籤。<div>有什麼好？無非就是能自動換行而已，但其實你徹底能夠作一個<table><tr><td>標籤，把它全都替換成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）工做組（Cascading Style Sheets Working Group）發佈了CSS網格佈局模塊第一級（CSS Grid Layout Module Level 1）的工做草案。在這個草案裏規定了上一節咱們講到的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的傢伙搞出來的鬼東西，實際使用極少，效果就是這樣：

看，你用<ul><li>能實現的效果，他能夠用<div>實現出來，就是這個做用。

屬性值

屬性值通常是附屬於主值的，好比主值裏設置了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。若是父元素設值了，就用父元素的設定，若是父元素沒設值，就用瀏覽器的缺省設定。直接看圖最明白：

總結

以上就是在css裏display的32種寫法。談了這麼多，不知道你記住了多少呢？其實，單純理解每個display屬性的取值都不難，難的是融會貫通，在恰當的地方運用恰當的值，畢竟咱們的目的是爲了把代碼寫短，而不是把代碼寫長。若是你怕記不太清的話，就請你收藏這篇小文，也許未來的某一天，你會用得着。