共计 3174 个字符，预计需要花费 8 分钟才能阅读完成。
CSS display 的多种写法
本文将介绍如何通过定义 display 属性创立一个 CSS formatting box
display 属性值
先来看规范文档是怎么形容的吧
从大的分类来讲，display 能够分为 6 个大类:
display-outside
所谓 display-outside，就是说这些值只会间接影响一个元素的内部体现，而不影响元素外面的儿子级孙子级元素的体现。
display: block：定义最根本的 block-level
display: inline：定义最根本的的 inline-level
display: run-in：会依据前面的元素进行转换 display 为 inline | inlin-block | block。如果它后一个元素是 block，那么它会变成 inline 并且神奇的是它会和后一个元素并排。如果它后一个元素是 inline 那么它会变成 block。
不过很遗憾，Chrome 从 32 版本开始将这个属性移除了。想要理解其实现成果，能够参考规范文档 https://www.w3.org/TR/css-dis…
想要理解为什么 chrome 不反对这个属性，能够浏览 display-run-in-dropped-in-chrome
display-inside
display-inside 艰深地讲，次要是用来管教本人上司的儿子级元素的排布的，规定它们的布局。
display: flow：处于试验阶段的一个属性值，渲染成哪个盒子与内部元素的显示类型无关。
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: 能够让元素块状化，同时蕴含格式化上下文 BFC，能够用来 革除浮动 ， 去除 margin 合并 ，实现 两栏自适应布局 等。
<div class="box">
<img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832">
<p class="flow-root">zhaodao88.com</p>
</div>
<style>
img {
float: left;
width: 50px;
margin-right: 10px;
}
.flow-root {
display: flow-root;
background-color: #f0f3f9;
padding: 10px;
}
</style>
display: table: 实现 table 表格
The element generates a principal table wrapper box that establishes a block formatting context, and which contains an additionally-generated table grid box that establishes a table formatting context.
display: flex: flex 布局，置信作为前端工程师，这个属性以及与它相关联的一系列属性肯定了然于胸。这里不能详述，对于这个写起来得是一大篇文章，感兴趣能够浏览这篇文章。https://css-tricks.com/snippe…
display: grid: 网格布局。也是很重要的一个布局，不能详述，对于这个写起来也是一大篇文章。详情还是参考这篇文章，讲得十分粗疏十分分明。https://css-tricks.com/snippe…
display: ruby: 这个就比拟好玩了，能够增加相似拼音的成果。感兴趣的能够移步规范文档：https://www.w3.org/TR/css-ruby-1
<ruby> 蝴 <rt>hú</rt> 蝶 <rt>dié</rt>
display-listitem
display: list-item: 实现列表元素的成果，等同于<ul><li>，感兴趣能够浏览我之前写的对于 list-model 详细描述的两篇文章。
https://blog.csdn.net/wuchen0…
https://blog.csdn.net/wuchen0…
display-internal
次要为 display: table-*, display: ruby-* 这些属性。
在这里次要讲讲 display: table-cell：能够用来实现 大小不固定元素的垂直居中 ， 两栏自适应布局，
- 垂直居中：
div{
display:table-cell;
width:1em;
height:1em;
border:1px solid #beceeb;
font-size:144px;
text-align:center;
vertical-align:middle;
}
img{vertical-align:middle;}
<div>
<img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832"/>
</div>- 两栏自适应布局
应用办法等同于下面提到的 display: flow-root。
display-box
display: contents: 来看看规范文档对它的定义：
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
意思就是：将设置了该属性值的元素自身将不会产生任何盒子，然而它的从保留其子代元素的失常展现。设置了 display: contents 的元素自身不会被渲染，然而其子元素可能失常被渲染。
说到这里，仔细的你或者曾经想到它的利用场景了：咱们在写 vue 组件时，因为框架的要求，在输入的 <template> 外面必须包裹一个父元素，因而组件外面的内容最终都要包裹一层可能没有什么款式的 div。从页面渲染上来说，这其实是没有必要的，这个时候，就能够添上display: contents，既起到了包裹的作用，然而在理论渲染中，这个 div 其实没有生成任何 box。
display: none:
The element and its descendants generate no boxes or text runs.Similarly, if a text node is defined to behave as display: none, it generates no text runs.
display-legacy
display: inline-*：内联模块。简略了解为在 inline 外面示意 block 的个性。
参考
https://www.w3.org/TR/css-dis…
https://www.w3.org/TR/css-ruby-1
https://css-tricks.com/snippe…
https://css-tricks.com/snippe…
