display的32種寫法--摘抄
你知道『回』字有四種寫法，但你知道display有32種寫法嗎？今天我們一一道來携狭，讓你一次性完全掌握display，從此再也不用對它發(fā)愁日裙。
從大的分類來講，display的32種寫法可以分為6個(gè)大類灶体，再加上1個(gè)全局類阅签，一共是七大類：
?外部值
?內(nèi)部值
?列表值
?屬性值
?顯示值
?混合值
?全局值
外部值
所謂外部值，就是說這些值只會(huì)直接影響一個(gè)元素的外部表現(xiàn)蝎抽，而不影響元素里面的兒子級孫子級元素的表現(xiàn)政钟。
display: block;
這個(gè)值大家不陌生路克，我們最熟悉的<div>缺省就是這個(gè)值，最基本的塊級元素养交，屬于css入門初學(xué)者都知道的概念精算，只要是容器類型的元素基本都是這個(gè)值。除<div>之外碎连，還有<h1>到<h6>灰羽，<p>，<form>鱼辙，<header>廉嚼，<footer>，<section>倒戏，<article>天生都是這個(gè)值怠噪。
display: inline;
這個(gè)值大家也不陌生，行內(nèi)元素嘛杜跷，只要是個(gè)行內(nèi)元素都是這個(gè)值傍念，最典型的是<span>，還有<a>葛闷，<img>憋槐，以及古代html語言當(dāng)中的<b>，<i>都屬于這一類型淑趾。
display: run-in;
這個(gè)值有點(diǎn)奇怪阳仔，通常沒人用它，但你可以知道它治笨。因?yàn)槌薎E和Opera支持它以外驳概，其他所有主流瀏覽器包括Chrome, Safari, Firefox全都對它置若罔聞赤嚼。這東西說白了也沒什么神秘旷赖，它的意思就是說如果我們命令一個(gè)元素run-in，中文意思就是『闖入』更卒！那么這個(gè)元素就直接闖入下一行等孵。比如說這樣：
寫起來大概就是這樣：
<div class="a">aaa</div> <div class="b">bbb</div> .a { font-size: 36px; display: run-in; }
這有什么用呢？我們拿span設(shè)置font-size一樣可以實(shí)現(xiàn)這個(gè)效果蹂空，就讓IE自己跟自己玩去吧俯萌！說實(shí)話，在人力資源如此寶貴的今天上枕，IE的產(chǎn)品經(jīng)理不知腦子是不是進(jìn)水了咐熙，不派工程師去實(shí)現(xiàn)那么多比這重要的多得多的特性，卻花時(shí)間做這么個(gè)沒用的玩意兒辨萍，難道工程師的時(shí)間不是金錢嗎棋恼？難怪市場占有率連年下滑。
內(nèi)部值
談完了外部值，我們來看看內(nèi)部值爪飘。這一組值比較有意思了义起，在css3如火如荼的今天，你要玩不轉(zhuǎn)這些值师崎，怕是哪兒也找不到工作的默终。
內(nèi)部值主要是用來管束自己下屬的兒子級元素的排布的，規(guī)定它們或者排成S形犁罩，或者排成B形這樣的齐蔽。
display: flow;
含義不清，實(shí)驗(yàn)室階段產(chǎn)品床估，Chrome不支持肴熏。如果還不夠說服你暫時(shí)不要碰它的話，試著理解以下英文原文：
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的漸漸多起來了蛙吏，因?yàn)樗梢該纹鸨荒鉬loat掉的塊級元素的高度。外容器本來是有高度的鞋吉，就像這樣：
<div class="container container1"> <div class="item"></div> Example one </div> .container {
border: 2px solid #3bc9db;
border-radius: 5px;width: 400px; padding: 5px; } .item {
height: 100px;
width: 100px;border: 1px solid #0b7285;
border-radius: 5px; }
結(jié)果因?yàn)槟阆胱屇且恍凶稚先パ蛔觯谑悄憬o.item加了一個(gè)float: left;結(jié)果就成這樣了，外容器高度掉了谓着，這不是很多人常犯的錯(cuò)誤嗎泼诱？
現(xiàn)在我們給.container加上display: flow-root;再看一下：
喏，外容器高度又回來了赊锚，這效果是不是杠杠的治筒？
那位同學(xué)說，我們用clear: both;不是一樣可以達(dá)到這效果嗎舷蒲？
.container::after {
content: '';
clear: both;
display: table; }
小明耸袜，請你出去！我們在講display: flow-root;牲平，不是在講clear: both;堤框！
display: table;
這一個(gè)屬性，以及下面的另外8個(gè)與table相關(guān)的屬性纵柿，都是用來控制如何把div顯示成table樣式的蜈抓，因?yàn)槲覀儾幌矚g<table>這個(gè)標(biāo)簽嘛，所以我們想把所有的<table>標(biāo)簽都換成<div>標(biāo)簽昂儒。
<div>有什么好沟使？無非就是能自動(dòng)換行而已，但其實(shí)你完全可以做一個(gè)<table><tr><td>標(biāo)簽渊跋，把它全都替換成display: block;也可以自動(dòng)折行腊嗡，只不過略微麻煩而已撤缴。
關(guān)于display: table;的詳細(xì)用法，大家可以參考這篇文章叽唱，這里就不細(xì)說了屈呕。
display: flex;
敲黑板，劃重點(diǎn)棺亭！作為新一代的前端工程師虎眨，這個(gè)屬性你必須爛熟于胸衣中，哦镶摘，錯(cuò)了嗽桩，是胸中。
display: flex;以及與它相關(guān)聯(lián)的一系列屬性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content凄敢，并且包括所有這些屬性的取值碌冶，都是你需要反復(fù)研磨的。
2009年誕生的這個(gè)屬性可以說是不亞于css界一場蒸汽機(jī)誕生一樣的工業(yè)革命涝缝，它的誕生標(biāo)志著馬車一樣的float被徹底拋進(jìn)歷史的垃圾堆扑庞。
關(guān)于它的詳情，會(huì)中文的可以參考阮一峰的這篇文章拒逮，但我認(rèn)為罐氨，格式編排的更好還是csstrick上的這篇文章。
沒有一張圖能完整地展現(xiàn)flex的神韻滩援，就放這張我比較喜歡的圖片吧：
display: grid;
會(huì)flex很吊嗎栅隐？會(huì)grid更吊哦！也許這就是下次前端面試的重點(diǎn)哦玩徊！
grid布局租悄，中文翻譯為網(wǎng)格布局。學(xué)習(xí)grid布局有兩個(gè)重點(diǎn)：
一個(gè)重點(diǎn)是grid布局引入了一個(gè)全新的單位：fr恩袱，它是fraction（分?jǐn)?shù)）的縮寫泣棋，所以從此以后，你的兵器庫里除了px, em, rem, 百分比這些常見兵器以及vw, vh這些新式武器之外憎蛤，又多了一樣旁門暗器fr外傅，要想用好grid，必須充分掌握fr俩檬。
另一個(gè)重點(diǎn)是斜杠操作符，這可不是分?jǐn)?shù)哦碾盟。它表示的是起始位置和結(jié)束位置棚辽。比如說3 / 4，這可不是四分之三的意思冰肴，這是指一個(gè)元素從第3行開始屈藐，到第4行結(jié)束榔组，但又不包括第4行。
同樣联逻，與grid相關(guān)聯(lián)的也有一大堆旁門屬性搓扯，是在學(xué)習(xí)display: grid;的同時(shí)必須掌握的。
包括：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)于這個(gè)寫起來又是一大篇文章。詳情還是參考csstrick上這篇文章公壤，講得非常細(xì)致非常清楚换可。
display: ruby;
ruby這個(gè)取值對于我們亞洲人來說其實(shí)是非常有用的一個(gè)東西，但是目前除了Firefox以外其它瀏覽器對它的支持都不太好厦幅。簡而言之沾鳄，display: ruby;的作用就是可以做出下面這樣的東西：
很好的東西，對吧确憨？如果可以用的話译荞，對我國的小學(xué)教育可以有極大的促進(jìn)。但可惜我們現(xiàn)在暫時(shí)還用不了休弃。
ruby這個(gè)詞在英語里的意思是紅寶石磁椒，但在日語里是ルビ，翻譯成中文是旁注標(biāo)記的意思玫芦，我們中文的旁注標(biāo)記就是漢語拼音浆熔。
可以想見，這個(gè)標(biāo)準(zhǔn)的制定者肯定是日本人桥帆，如果是我們中國人的話医增，那這個(gè)標(biāo)簽就不是ruby，而是pinyin了老虫。還有一個(gè)ruby語言叶骨，發(fā)明者也是一個(gè)日本人，和html里這個(gè)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）的工作草案夺欲。
在這個(gè)草案里規(guī)定了上一節(jié)我們講到的display: grid;的方案跪帝。而display: subgrid;是屬于2017年11月9日發(fā)布的非正式的CSS網(wǎng)格布局模塊第二級的內(nèi)容。
所以這是一個(gè)非常新的草案些阅，并且圍繞它的爭議從來也沒有斷過伞剑。
subgrid總的思想是說大網(wǎng)格里還可以套小網(wǎng)格，互相不影響市埋。
但如果grid里可以再套subgrid的話黎泣，那我subgrid里還想再套subgrid怎么辦恕刘？subsubgrid嗎？況且抒倚，到底是grid: subgrid;還是display: subgrid;這個(gè)也沒有達(dá)成共識褐着，關(guān)于此一系列的爭議，感興趣的同學(xué)可以看看這篇文章托呕，英語好的可以看這篇含蓉。
列表值
display: list-item;
display: list-item;和display: table;一樣，也是一幫痛恨各種html標(biāo)簽镣陕，而希望只使用<div>來寫遍一切html的家伙搞出來的鬼東西谴餐，實(shí)際使用極少，效果就是這樣：
看呆抑，你用<ul><li>能實(shí)現(xiàn)的效果岂嗓，他可以用<div>實(shí)現(xiàn)出來，就是這個(gè)作用鹊碍。
屬性值
屬性值一般是附屬于主值的厌殉，比如主值里設(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;。這個(gè)屬性有必要詳細(xì)說說狰住，因?yàn)樗耆梢詥为?dú)應(yīng)用张吉，用在高度不固定元素的垂直居中上，詳情請見張鑫旭的這篇文章催植。效果如下圖所示：
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年年初最令人喜大普達(dá)的一件大事了：Chrome 65版本終于要支持display: contents;了！Firefox早就支持了芥备，而Chrome直到現(xiàn)在才開始支持冬耿，這么重要的特性，它到底有什么功能呢萌壳？結(jié)果恐怕會(huì)令你大失所望亦镶。原來的布局是這樣的：
你給中間那個(gè)div加上display: contents;之后，它就變成這樣了：
這就是display: contents;的作用袱瓮，它讓子元素?fù)碛泻透冈匾粯拥牟季址绞界凸牵瑑H此而已。
display: none;
這么著名的值還用多說嗎尺借？
混合值
display: inline-block;
關(guān)于display: inline-block;的作用恐怕只要做過3天以上前端的工程師都應(yīng)該知道绊起。什么也不說了，上一張著名的圖片作總結(jié)吧：
display: inline-table;
你要能理解inline-block燎斩，你就能理解inline-table虱歪。在行內(nèi)顯示一個(gè)表格，就像這樣：
display: inline-flex;
這個(gè)就不用多說了吧栅表？跟上面一樣笋鄙，在行內(nèi)進(jìn)行彈性布局，參考display: flex;怪瓶。
display: inline-grid;
同上萧落，在行內(nèi)進(jìn)行網(wǎng)格布局，參考display: grid;洗贰。
全局值
這些值不是display屬性的專利找岖，幾乎其它任意屬性都可以用，列在這里湊個(gè)數(shù)哆姻。
display: inherit;
繼承父元素的display屬性宣增。
display: initial;
不管父元素怎么設(shè)定，恢復(fù)到瀏覽器最初始時(shí)的display屬性矛缨。
display: unset;
unset混合了inherit和initial爹脾。如果父元素設(shè)值了，就用父元素的設(shè)定箕昭，如果父元素沒設(shè)值灵妨，就用瀏覽器的缺省設(shè)定。直接看圖最明白：
總結(jié)
以上就是在css里display的32種寫法落竹。談了這么多泌霍，不知道你記住了多少呢？其實(shí)述召，單純理解每一個(gè)display屬性的取值都不難朱转，難的是融會(huì)貫通蟹地，在恰當(dāng)?shù)牡胤竭\(yùn)用恰當(dāng)?shù)闹担吘刮覀兊哪康氖菫榱税汛a寫短藤为，而不是把代碼寫長怪与。如果你怕記不太清的話，就請你收藏這篇小文缅疟，也許將來的某一天分别，你會(huì)用得著。
