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

• 外部值
• 內(nèi)部值
• 列表值
• 屬性值
• 顯示值
• 混合值
• 全局值

外部值

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

display: block;

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

display: inline;

這個值大家也不陌生，行內(nèi)元素嘛，只要是個行內(nèi)元素都是這個值，最典型的是<span>，還有<a>，<img>，以及古代html語言當(dāng)中的<b>，<i>都屬于這一類型。

display: run-in;

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

?

寫起來大概就是這樣：

JavaScript

1 2 3 4 5 6

<div class="a">aaa</div> <div class="b">bbb</div> .a { ??font-size: 36px; ??display: run-in; }

?

這有什么用呢？我們拿span設(shè)置font-size一樣可以實(shí)現(xiàn)這個效果，就讓IE自己跟自己玩去吧！說實(shí)話，在人力資源如此寶貴的今天，IE的產(chǎn)品經(jīng)理不知腦子是不是進(jìn)水了，不派工程師去實(shí)現(xiàn)那么多比這重要的多得多的特性，卻花時間做這么個沒用的玩意兒，難道工程師的時間不是金錢嗎？難怪市場占有率連年下滑。

內(nèi)部值

談完了外部值，我們來看看內(nèi)部值。這一組值比較有意思了，在css3如火如荼的今天，你要玩不轉(zhuǎn)這些值，怕是哪兒也找不到工作的。內(nèi)部值主要是用來管束自己下屬的兒子級元素的排布的，規(guī)定它們或者排成S形，或者排成B形這樣的。

display: flow;

含義不清，實(shí)驗室階段產(chǎn)品，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，現(xiàn)在用flow-root的漸漸多起來了，因為它可以撐起被你float掉的塊級元素的高度。外容器本來是有高度的，就像這樣：

Example one

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

????.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; ????}

結(jié)果因為你想讓那一行字上去，于是你給.item加了一個float: left;結(jié)果就成這樣了，外容器高度掉了，這不是很多人常犯的錯誤嗎？

現(xiàn)在我們給.container加上display: flow-root;再看一下：

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

那位同學(xué)說，我們用clear: both;不是一樣可以達(dá)到這效果嗎？

1 2 3 4 5

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

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

display: table;

這一個屬性，以及下面的另外8個與table相關(guān)的屬性，都是用來控制如何把div顯示成table樣式的，因為我們不喜歡<table>這個標(biāo)簽嘛，所以我們想把所有的<table>標(biāo)簽都換成<div>標(biāo)簽。

<div>有什么好？無非就是能自動換行而已，但其實(shí)你完全可以做一個<table><tr><td>標(biāo)簽，把它全都替換成display: block;也可以自動折行，只不過略微麻煩而已。關(guān)于display: table;的詳細(xì)用法，大家可以參考這篇文章，這里就不細(xì)說了。

?

display: flex;

敲黑板，劃重點(diǎn)！作為新一代的前端工程師，這個屬性你必須爛熟于胸衣中，哦，錯了，是胸中。display: flex;以及與它相關(guān)聯(lián)的一系列屬性：flex-direction,?flex-wrap,?flex-flow,?justify-content,?align-items,?align-content，并且包括所有這些屬性的取值，都是你需要反復(fù)研磨的。2009年誕生的這個屬性可以說是不亞于css界一場蒸汽機(jī)誕生一樣的工業(yè)革命，它的誕生標(biāo)志著馬車一樣的float被徹底拋進(jìn)歷史的垃圾堆。

關(guān)于它的詳情，會中文的可以參考阮一峰的這篇文章，但我認(rèn)為，格式編排的更好還是csstrick上的這篇文章。沒有一張圖能完整地展現(xiàn)flex的神韻，就放這張我比較喜歡的圖片吧：

display: grid;

會flex很吊嗎？會grid更吊哦！也許這就是下次前端面試的重點(diǎn)哦！

grid布局，中文翻譯為網(wǎng)格布局。學(xué)習(xí)grid布局有兩個重點(diǎn)：一個重點(diǎn)是grid布局引入了一個全新的單位：fr，它是fraction（分?jǐn)?shù)）的縮寫，所以從此以后，你的兵器庫里除了px,?em,?rem,?百分比這些常見兵器以及vw,?vh這些新式武器之外，又多了一樣旁門暗器fr，要想用好grid，必須充分掌握fr。另一個重點(diǎn)是斜杠操作符，這可不是分?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上這篇文章，講得非常細(xì)致非常清楚。

display: ruby;

ruby這個取值對于我們亞洲人來說其實(shí)是非常有用的一個東西，但是目前除了Firefox以外其它瀏覽器對它的支持都不太好。簡而言之，display: ruby;的作用就是可以做出下面這樣的東西：

?

很好的東西，對吧？如果可以用的話，對我國的小學(xué)教育可以有極大的促進(jìn)。但可惜我們現(xiàn)在暫時還用不了。

ruby這個詞在英語里的意思是紅寶石，但在日語里是ルビ，翻譯成中文是旁注標(biāo)記的意思，我們中文的旁注標(biāo)記就是漢語拼音。可以想見，這個標(biāo)準(zhǔn)的制定者肯定是日本人，如果是我們中國人的話，那這個標(biāo)簽就不是ruby，而是pinyin了。還有一個ruby語言，發(fā)明者也是一個日本人，和html里這個ruby是兩碼事，不要搞混了。

ruby的語法大致如下：

?

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;這個也沒有達(dá)成共識，關(guān)于此一系列的爭議，感興趣的同學(xué)可以看看這篇文章，英語好的可以看這篇。

列表值

display: list-item;

display: list-item;和display: table;一樣，也是一幫痛恨各種html標(biāo)簽，而希望只使用

來寫遍一切html的家伙搞出來的鬼東西，實(shí)際使用極少，效果就是這樣：

看，你用<ul><li>能實(shí)現(xiàn)的效果，他可以用<div>實(shí)現(xiàn)出來，就是這個作用。

屬性值

屬性值一般是附屬于主值的，比如主值里設(shè)置了display: table;，就可以在子元素里使用display: table-row-group;等等屬性，不過并不絕對。關(guān)于它們的作用，主要參考主值就夠了。

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;。這個屬性有必要詳細(xì)說說，因為它完全可以單獨(dú)應(yīng)用，用在高度不固定元素的垂直居中上，詳情請見張鑫旭的這篇文章。效果如下圖所示：

?

display: table-column-group;

詳情參考display: table;。

display: table-column;

詳情參考display: table;。

詳情參考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年年初最令人喜大普達(dá)的一件大事了：Chrome 65版本終于要支持display: contents;了！Firefox早就支持了，而Chrome直到現(xiàn)在才開始支持，這么重要的特性，它到底有什么功能呢？結(jié)果恐怕會令你大失所望。原來的布局是這樣的：

你給中間那個div加上display: contents;之后，它就變成這樣了：

這就是display: contents;的作用，它讓子元素?fù)碛泻透冈匾粯拥牟季址绞?#xff0c;僅此而已。

display: none;

這么著名的值還用多說嗎？

混合值

display: inline-block;

關(guān)于display: inline-block;的作用恐怕只要做過3天以上前端的工程師都應(yīng)該知道。什么也不說了，上一張著名的圖片作總結(jié)吧：

?

display: inline-table;

你要能理解inline-block，你就能理解inline-table。在行內(nèi)顯示一個表格，就像這樣：

?

display: inline-flex;

這個就不用多說了吧？跟上面一樣，在行內(nèi)進(jìn)行彈性布局，參考display: flex;。

display: inline-grid;

同上，在行內(nèi)進(jìn)行網(wǎng)格布局，參考display: grid;。

全局值

這些值不是display屬性的專利，幾乎其它任意屬性都可以用，列在這里湊個數(shù)。

display: inherit;

繼承父元素的display屬性。

display: initial;

不管父元素怎么設(shè)定，恢復(fù)到瀏覽器最初始時的display屬性。

display: unset;

unset混合了inherit和initial。如果父元素設(shè)值了，就用父元素的設(shè)定，如果父元素沒設(shè)值，就用瀏覽器的缺省設(shè)定。直接看圖最明白：

?

轉(zhuǎn)載于:https://www.cnblogs.com/langzianan/p/8403331.html

總結(jié)

以上是生活随笔為你收集整理的display 的 32 种写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。