轉(zhuǎn)自（擔(dān)心原作者會刪除文章，所以這里自己做個備份）：display的32種寫法
你知道『回』字有四種寫法，但你知道display有32種寫法嗎？今天我們一一道來，讓你一次性完全掌握display，從此再也不用對它發(fā)愁。
從大的分類來講，display的32種寫法可以分為6個大類，再加上1個全局類，一共是7大類
1. 外部值
所謂外部值，就是說這些值只會直接影響一個元素的外部表現(xiàn)，而不影響元素里面的兒子級孫子級元素的表現(xiàn)。
1.1
display: block;：這個值大家不陌生，我們最熟悉的<div>缺省就是這個值，最基本的塊級元素，屬于css入門初學(xué)者都知道的概念，只要是容器類型的元素基本都是這個值。除<div>之外，還有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>天生都是這個值。1.2
display: inline;：這個值大家也不陌生，行內(nèi)元素嘛，只要是個行內(nèi)元素都是這個值，最典型的是<span>，還有<a>，<img>，以及古代html語言當(dāng)中的<b>，<i>都屬于這一類型。1.3
display: run-in（通常沒人用它）：除了IE和Opera支持它以外，其他所有主流瀏覽器包括Chrome,Safari,Firefox全都對它置若罔聞。run-in，中文意思就是『闖入』那么這個元素就直接闖入下一行
2. 內(nèi)部值【CSS3相關(guān)：重要】
談完了外部值，我們來看看內(nèi)部值。這一組值比較有意思了，在css3如火如荼的今天，你要玩不轉(zhuǎn)這些值，怕是哪兒也找不到工作的。內(nèi)部值主要是用來管束自己下屬的兒子級元素的排布的，規(guī)定它們或者排成S形，或者排成B形這樣的。
- 2.1
display: flow;（實驗階段）：含義不清，實驗室階段產(chǎn)品，Chrome不支持
-
2.2
display: flow-root;：不同于flow，現(xiàn)在用flow-root的漸漸多起來了，
因為它可以撐起被你float掉的塊級元素的高度。浮動元素使其父元素高度塌陷（該段內(nèi)容參看了另一文章后總結(jié)） :我們經(jīng)常會遇到一種情況，給一個元素設(shè)置浮動之后 float:left/right;，如果該元素的父元素有背景顏色，那么會發(fā)現(xiàn)父元素的背景顏色消失了；如果父元素有一個邊框，那么浮動元素?zé)o法將邊框撐開。
<html>
<head>
<style>
.pdiv {
background-color:cornflowerblue;
border: 2px solid red;
/**父元素加overflow:hidden
可以消除子元素float對父元素的影響*/
/**overflow: hidden; */
/**
display新的屬性值
雖然目前僅幾個最新瀏覽器支持，
但完全可以通過@supports()屬性做完美降級處理。
*/
display: flow-root;
}
/**
為父元素添加偽類可以
消除子元素float對父元素的影響
.pdiv::after {
content:"";
clear:both; //清除浮動
display:block; //確保該元素是一個塊級元素
}
*/
.cdiv {
background-color:burlywood;
border: 1px solid brown;
width: 100px;
height: 100px;
margin: 20px;
/** float: left; */
}
</style>
</head>
<body>
<div class="pdiv">
<div class="cdiv">
</div>
<div class="cdiv">
</div>
</div>
</body>
</html>
未加float時：
將上面代碼中的float放開：
在第一個示例中仿佛父元素消失了，但在第二個示例中發(fā)現(xiàn)其實父元素并沒有消失，只是高度被計算為0。這就要回到浮動元素的特性來說明此問題“當(dāng)元素設(shè)置浮動后，會自動脫離文檔流”，翻譯成白話就是說，元素浮動后，就不在整個文檔流的管轄范圍，那么它之前存在在父元素內(nèi)的高度就隨著浮動不復(fù)存在了，而此時父元素會默認(rèn)自己里面沒有任何內(nèi)容（前提是未給父元素設(shè)置固定高度，如果父元素本身有固定高度，就不會出現(xiàn)這種情況）
解決方法：
a、給父元素也添加float。這樣讓父元素與子元素一起脫離文檔流浮動起來，保證子元素在父元素內(nèi)，這樣父元素就能自適應(yīng)子元素的高度，但是此方法有一弊端，一定會影響父元素之后的元素排列，甚至影響布局。
b、給父元素一個固定高度，此方法適用于子元素高度已知并且固定的情況。
c、添加一個塊級元素，并給此元素設(shè)置clear:both;清除浮動。在很早之前用的就是這種解決辦法，新建一個空的div，為這個div設(shè)置clear：both；這樣無疑是增加了無意義的標(biāo)簽，一個大型頁面中，這種標(biāo)簽太多是不好的。
d、給父元素添加 overflow：hidden;
e、給父元素添加偽類::after清除浮動
新的解決方法：display: flow-root;
2.3
display: table;：這一個屬性，以及下面的另外8個與table相關(guān)的屬性，都是用來控制如何把div顯示成table樣式的，因為我們不喜歡<table>這個標(biāo)簽嘛，所以我們想把所有的<table>標(biāo)簽都換成<div>標(biāo)簽。<div>有什么好？無非就是能自動換行而已，但其實你完全可以做一個<table><tr><td>標(biāo)簽，把它全都替換成display: block;也可以自動折行，只不過略微麻煩而已。-
2.4
display: flex;【敲黑板，劃重點！】：作為新一代的前端工程師，這個屬性你必須爛熟于胸。display: flex;以及與它相關(guān)聯(lián)的一系列屬性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，并且包括所有這些屬性的取值，都是你需要反復(fù)研磨的。2009年誕生的這個屬性可以說是不亞于css界一場蒸汽機誕生一樣的工業(yè)革命，它的誕生標(biāo)志著馬車一樣的float被徹底拋進歷史的垃圾堆。
image
-
2.5
display: grid;【會flex很吊嗎？會grid更吊哦！】：也許這就是下次前端面試的重點哦！
image
grid布局，中文翻譯為網(wǎng)格布局。學(xué)習(xí)grid布局有兩個重點：一個重點是grid布局引入了一個全新的單位：fr，它是fraction（分?jǐn)?shù)）的縮寫，所以從此以后，你的兵器庫里除了px, em, rem, 百分比這些常見兵器以及vw,vh這些新式武器之外，又多了一樣旁門暗器fr，要想用好grid，必須充分掌握fr。
另一個重點是斜杠操作符，這可不是分?jǐn)?shù)哦。它表示的是起始位置和結(jié)束位置。比如說3 /4，這可不是四分之三的意思，這是指一個元素從第3行開始，到第4行結(jié)束，但又不包括第4行。
同樣，與grid相關(guān)聯(lián)的也有一大堆旁門屬性，是在學(xué)習(xí)
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。不能詳述，關(guān)于這個寫起來又是一大篇文章。詳情還是參考csstrick上這篇文章，講得非常細致非常清楚。 -
2.6
display: ruby;【類似加拼音】：ruby這個取值對于我們亞洲人來說其實是非常有用的一個東西，但是目前除了Firefox以外其它瀏覽器對它的支持都不太好。簡而言之，display: ruby;的作用就是可以做出下面這樣的東西：
image -
2.7
display: subgrid;【了解即可】2015年8月6日，W3C的級聯(lián)樣式單（CSS）工作組（Cascading Style Sheets Working Group）發(fā)布了CSS網(wǎng)格布局模塊第一級（CSS Grid Layout Module Level 1）的工作草案。在這個草案里規(guī)定了上一節(jié)我們講到的display: grid;的方案。而
display: subgrid;是屬于2017年11月9日發(fā)布的非正式的CSS網(wǎng)格布局模塊第二級的內(nèi)容。所以這是一個非常新的草案，并且圍繞它的爭議從來也沒有斷過。subgrid總的思想是說大網(wǎng)格里還可以套小網(wǎng)格，互相不影響。但如果
grid里可以再套subgrid的話，那我subgrid里還想再套subgrid怎么辦？subsubgrid嗎？況且，到底是grid: subgrid;還是display: subgrid;這個也沒有達成共識，關(guān)于此一系列的爭議，感興趣的同學(xué)可以看看這篇文章
3. 列表值【極少用】
- 3.1
display: list-item;
image
display: list-item;和display:table;一樣，也是一幫痛恨各種html標(biāo)簽，而希望只使用<div>來寫遍一切html的家伙搞出來的鬼東西，實際使用極少，效果就是這樣：
image
看，你用<ul><li>能實現(xiàn)的效果，他可以用<div>實現(xiàn)出來，就是這個作用。 - 3.2 哈哈哈~~~~ PS：自己今天看了下
li的默認(rèn)樣式
image
4. 屬性值【附屬于主值】
比如主值里設(shè)置了display: table;，就可以在子元素里使用display: table-row-group;等等屬性，不過并不絕對。關(guān)于它們的作用，主要參考主值就夠了。
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
我所知道的幾種display:table-cell的應(yīng)用
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
5. 顯示值
MDN里把它叫做<display-box> values（盒子值），我把它叫做顯示值，主要是為了便于理解。
5.1
display: contents（下面內(nèi)容來自w3cplus）-
display:contents啥意思呢？看下圖展示:
image
上圖對應(yīng)代碼：<div style="display: contents; background: magenta; border: solid thick black; ng: 20px; color: cyan; font: 30px/1 Monospace;"> <span style="background: black;">foobar</span> </div>即：
display: contents樣式規(guī)則使div元素不產(chǎn)生任何邊界框，因此元素的背景、邊框和填充部分都不會渲染。然而，繼承的屬性如顏色(color)和字體(font)卻能照常影響到span這個子元素。 -
5.2 CSS網(wǎng)格布局與display: contents
這個
display: contents樣式能取代子網(wǎng)格(subgrids：上面2.7提到的內(nèi)容)功能，目前還沒有任何瀏覽器支持次網(wǎng)格。不過，子網(wǎng)格(subgrids)有些情況還是需要用到的。典型的例子是網(wǎng)格布局(
Grid Layout)的自動就位(auto-placement)效果，下面是一個簡單的表格元素，看起來是這樣的：<html> <head> <style> form { display:grid; } label { grid-column: 1; } input { grid-column: 2; } button { grid-column: span 2; } </style> </head> <body> <form> <label>Name</label><input /> <label>Mail</label><input /> <button>Send</button> </form> </body> </html>
然而這不是一個典型的HTML網(wǎng)頁表格，因為通常我們會在表格內(nèi)部使用列表，這樣使用讀屏軟件的用戶就能預(yù)先知道有多少空要填。所以HTML網(wǎng)頁看起來更可能會是這樣的：
<form>
<ul>
<li><label>Name</label><input /></li>
<li><label>Mail</label><input /></li>
<li><button>Send</button></li>
</ul>
</form>
有了display: contents樣式，就可以做出和第一個例子相同的布局，用的CSS也差不多：
ul{
display: grid;
}
li{
display: contents;
}
label{
grid-column: 1;
}
input{
grid-column: 2;
}
button {
grid-column: span 2;
}
現(xiàn)在這樣，網(wǎng)站轉(zhuǎn)用CSS網(wǎng)格布局(Grid Layout)時，HTML代碼不用大改，也不需要舍去一些確實有用的HTML元素，如上面例子里的列表元素，真的很不錯。
6. 混合值
-
6.1
display: inline-block;：關(guān)于display: inline-block;的作用恐怕只要做過3天以上前端的工程師都應(yīng)該知道。什么也不說了，上一張著名的圖片作總結(jié)吧：
image -
6.2
display: inline-table;：你要能理解inline-block，你就能理解inline-table。在行內(nèi)顯示一個表格，就像這樣：
image 6.3
display: inline-flex;：這個就不用多說了吧？跟上面一樣，在行內(nèi)進行彈性布局，參考display: flex;。6.4
display: inline-grid;：同上，在行內(nèi)進行網(wǎng)格布局，參考display: grid;。
7. 全局值
這些值不是display屬性的專利，幾乎其它任意屬性都可以用，列在這里湊個數(shù)。
- 7.1
display: inherit;：繼承父元素的display屬性。 - 7.2
display: initial;：不管父元素怎么設(shè)定，恢復(fù)到瀏覽器最初始時的display屬性 - 7.3
display: unset;：unset混合了inherit和initial。如果父元素設(shè)值了，就用父元素的設(shè)定，如果父元素沒設(shè)值，就用瀏覽器的缺省設(shè)定。直接看圖最明白：
總結(jié)
以上就是在css里display的32種寫法。談了這么多，不知道你記住了多少呢？其實，單純理解每一個display屬性的取值都不難，難的是融會貫通，在恰當(dāng)?shù)牡胤竭\用恰當(dāng)?shù)闹?，畢竟我們的目的是為了把代碼寫短，而不是把代碼寫長。如果你怕記不太清的話，就請你收藏這篇小文，也許將來的某一天，你會用得著。
