display

从大的分类来讲，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;        
         
 width: 400px;  padding: 5px;    } .item {        
height: 100px;        
width: 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