前端小知识（2）--display
display属性
对于大多数display属性而言，实际coding中使用的场景很少。本文仅列举一些w3c列举的属性，还有一些属性过于小众，就不列举了。如果想要拓展的话可以参考display的32中写法
从大的分类来讲，display可以分为6个大类，和1个全局类。
外部值
block
对于我们最熟悉的<div>默认的就是block，此外还有h1-h6，p，form，header，footer，section，article
inline
行内元素默认都是这个值，如span，a，img，b，i
run-in
这个只有IE和Opera支持。此元素会根据上下文作为块级元素或内联元素显示。
内部值
table
flex
敲重点啦！！！
参考：阮一峰讲flex，可以将这个作为词典，当然能够记住其中的常用属性最好不过了，如flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
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。不能详述，关于这个写起来又是一大篇文章。
参考文章：
ruby
目前除了Firefox，其他浏览器的支持性并不大好，主要用于给文字加拼音等场景。
subgrid
建议阅读：为什么是display:contents而不是subgrid
列表值
list-item
display: list-item;和display: table;一样，也是一帮痛恨各种html标签，而希望只使用div来写遍一切html的家伙搞出来的东西，实际使用极少
属性值
属性值一般是附属于主值的，比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-cell
- table-column-group
- table-column
- table-caption
- ruby-base
- ruby-text
- ruby-base-container
- ruby-text-container
显示值
contents
display: content是display的一个新的属性值。为一个元素应用display: content属性会导致其自身的盒子不生成但所有的子元素都会照常生成。
none
建议阅读：display:none和visibility:hidden
混合值
inline-block
inline-table
inline-flex
inline-grid
全局值
inherit
initial
unset
对于如何写好CSS布局，建议参考：
