display的32种写法

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⽇发布的⾮正式的的内容。

所以这是⼀个⾮常新的草案，并且围绕它的争议从来也没有断过。

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-header-group;
详情参考。

display: table-footer-group;
详情参考。

display: table-row;
详情参考。

display: table-cell;
详情参考。

这个属性有必要详细说说，因为它完全可以单独应⽤，⽤在⾼度不固定元素的垂直居中上，详情请见张鑫旭的。

效果如下图所⽰：
display: table-column-group;
详情参考。

display: table-column;
详情参考。

display: table-caption;
详情参考。

display: ruby-base;
详情参考。

display: ruby-text;
详情参考。

display: ruby-base-container;
详情参考。

display: ruby-text-container;
详情参考。

显⽰值
MDN⾥把它叫做<display-box> values（盒⼦值），我把它叫做显⽰值，主要是为了便于理解。

display: contents;
这⼤概是2018年年初最令⼈喜⼤普达的⼀件⼤事了：！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: inline-grid;
同上，在⾏内进⾏⽹格布局，参考。

全局值
这些值不是display属性的专利，⼏乎其它任意属性都可以⽤，列在这⾥凑个数。

display: inherit;
继承⽗元素的display属性。

display: initial;
不管⽗元素怎么设定，恢复到浏览器最初始时的display属性。

display: unset;
unset混合了inherit和initial。

如果⽗元素设值了，就⽤⽗元素的设定，如果⽗元素没设值，就⽤浏览器的缺省设定。

直接看图最明⽩：
总结
以上就是在css⾥display的32种写法。

谈了这么多，不知道你记住了多少呢？其实，单纯理解每⼀个display属性的取值都不难，难的是融会贯通，在恰当的地⽅运⽤恰当的值，毕竟我们的⽬的是为了把代码写短，⽽不是把代码写长。

如果你怕记不太清的话，就请你收藏这篇⼩⽂，也许将来的某⼀天，你会⽤得着。