display值的分类

整体来讲，display的值可以分为6个大类，1个全局类，一共是7大类：

• 外部值
• 内部值
• 列表值
• 属性值
• 显示值
• 混合值
• 全局值

 

外部值，指的是这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现;常见的外部值有 display:block;     display:inline;    display:run-in;

display:block;  块级元素，css初学者都知道的概念，只要是容器类型的元素基本都是这个值。除div之外，h1-h6、p、form、header、footer、section、artical等天生都是这个值

display:inline; 行内元素，这个基本上也都知道，只要是行内元素就都是这个值，如span、a、img、del、strong、em、code等等都属于这一类型

display:run-in; 这个值基本上不会有人用，但你可以对它进行一下了解；因为除了IE和Opera支持它以外，其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。这东西说白了也没什么神秘，

　　　　　　　　它的意思就是说如果我们命令一个元素run-in，中文意思就是『闯入』！那么这个元素就直接闯入下一行，鉴于此值和中国男足一样如此无用，我们弃之不理即可，不用浪费过多时间。。。

 

内部值：主要是用来规定子级元素布局排列的，规定它们要么排成S形，要么排成B形，再或者排成S-B这样队形的；在css3如火如荼的今天，你要玩不转这些值，怕是哪儿也找不到工作的;常见的值主要有：

　　　　display:flow;        display:flex; 

display: flex; 弹性盒布局，作为新一代的全栈工程师，2009年诞生的这个属性可以说不亚于css界一场工业革命，它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆，所以这个属性你

　　　　　　　　　　　　　　 必须烂熟于你的胸(衣)中；display: flex;以及它的六大属性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，包括所有这些属性

　　　　　　　　　　　　　　 的值，都是你需要反复推敲的；关于它的详情，可以参考阮一峰的这篇文章，但我认为，格式编排的更好还是csstrick上的这篇文章

 

前言：会flex很吊吗？会grid更吊哦！也许这就是下次前端面试的重点！

display: 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: 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日发布的非正式的CSS网格布局模块第二级的内容。所以这是一个非常新的草案，并且围绕它的争议从来也没有断过。subgrid总的思想是说大网格

　　　　　　　　　 里还可以套小网格，互相不影响。但如果grid里可以再套subgrid的话，那我subgrid里还想再套subgrid怎么办？subsubgrid吗？况且，到底是grid: subgrid;还是display: subgrid;这个也没有达成共识，关于此一

　　　　　　　　   系列的争议，感兴趣的同学可以看看这篇文章，英语好的可以看这篇。

display: table;   这一个属性，以及下面的另外8个与table相关的属性，都是用来控制如何把div显示成table样式的，因为我们不喜欢<table>这个标签嘛，所以我们想把所有的<table>标签都换成<div>标签。<div>有什么好？无非就是能自动

　　　　　　 换行而已，但其实你完全可以做一个<table><tr><td>标签，把它全都替换成display: block;也可以自动折行，只不过略微麻烦而已。关于display: table;的详细用法，大家可以参考这篇文章。　　　

　　　　　　　  目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？（即DIV+CSS布局优势）

　　　　　　　　　　1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

　　　　　　　　　　2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

　　　　　　　　　　3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

　　　　　　　　　　4、table的嵌套性太多，用DIV代码会比较简洁

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掉的块级元素的高度。外容器本来是有高度的，就像这样：

　　　　　　　　　　 

　　　　　　　　　　 Example one

 

  .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: ruby; 旁注标记 ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西，但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之，display: ruby;的作用就是可以做出下面这样的东西：

　　　　　　　　　　

很好的东西，对吧？如果可以用的话，对我国的小学教育可以有极大的促进。但可惜我们现在暂时还用不了。

ruby这个词在英语里的意思是红宝石，但在日语里是ルビ，翻译成中文是旁注标记的意思，我们中文的旁注标记就是汉语拼音。可以想见，这个标准的制定者肯定是日本人，如果是我们中国人的话，那这个标签就不是ruby，

而是pinyin了。还有一个ruby语言，发明者也是一个日本人，和html里这个ruby是两码事，不要搞混了。

ruby的语法大致如下：

　　　　　　　　　　

列表值 display:list-item; 和display: table;一样，痛恨各种html标签，只想使用div标签来搞出类似ul-li的效果，如下：

　　　　　　　　　　　

　　　　说白了就是，你用ul-li能实现的效果，他可以用div实现出来，就是这个作用，这个很少使用，了解即可，不用过多浪费时间。

属性值:一般附属于主值，比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对；关于它们的作用，主要参考主值就够了。

　　　　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;。这个属性有必要详细说说，因为它完全可以单独应用，用在高度不固定元素的垂直居中上，详情请见张鑫旭的这篇文章。效果如下图所示：　　　

　　　　　　　　　　　　　　　

　　　　  display: table-column-group;  详情参考display: table;

　　　 display: table-column;  详情参考display: table;

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

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

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

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

 

盒子值 

　　　　display: contents; 让子元素拥有和父元素一样的布局方式，仅此而已。

　　　　这大概是2018年年初最令人喜大普达的一件大事了：Chrome 65版本终于要支持display: contents;了！Firefox早就支持了，而Chrome直到现在才开始支持，这么重要的特性，它到底有什么功能呢？结果恐怕会令你大失所望。原来的布局是这样的：

　　　　　　　　

　　　　　你给中间那个div加上display: contents;之后，它就变成这样了：

　　　　　　　　

 

　　　　display: none;  使元素从文档流中消失，声明远播，一般面试题中会用来和visibility:hidden;做比较

混合值

　　　　display: inline-block; 行内块元素，关于display: inline-block;的作用恐怕只要做过3天以上前端的工程师都应该知道。什么也不说了，上一张著名的图片作总结吧：

　　　　　　　　 

　　　　display: inline-table; 你要能理解inline-block，你就能理解inline-table。在行内显示一个表格，就像这样：

　　　　　　　　

 

　　　　display: inline-flex;  这个就不用多说了吧？跟上面一样，在行内进行弹性布局，参考display: flex;。

　　　　display: inline-grid;  同上，在行内进行网格布局，参考display: grid;。

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

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

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

　　　　display: unset; unset混合了inherit和initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设定。直接看图最明白：

　　　　　　　　

 

---

获取更多前端知识，请关注下方公众号 ↓↓↓↓↓↓