从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是七大类：
➤外部值
➤内部值
➤列表值
➤属性值
➤显示值
➤混合值
➤全局值
外部值
所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。
内部值
谈完了外部值，我们来看看内部值。这一组值比较有意思了，在css3如火如荼的今天，你要玩不转这些值，怕是哪儿也找不到工作的。
内部值主要是用来管束自己下属的儿子级元素的排布的，规定它们或者排成S形，或者排成B形这样的。
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;
400px; padding: 5px; } .item {
height: 100px;
100px;
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: 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上这篇文章，讲得非常细致非常清楚。
https://www.cnblogs.com/liuhao-web/p/8458060.html
display属性必须要会block inline inlineblock flex