display(用于设置元素渲染框的类型)

1.none 不显示元素。
2.block 显示为块状元素。
3.inline 显示为行内元素。
4.inline-block 显示为行内块，创建一个 BFC。
5.table-cell 显示行为与 <td>一样。垂直居中 https://codepen.io/twhy/pen/rwejpZ
6.flex flex 布局
7.grid grid 布局

一、block，inline，inline-block 元素的区别是什么？
1. inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。 设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
2.block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inline 元素。
3.inline-block 元素不换行，设置 width, height, padding, margin 属性有效。 由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。

二、inline-block 常见的问题。
inline-block 之间有空隙，因为inline-block 之间有空格、Tab、换行符。解决的方法有：
1、元素放在一行，eg:ul 下的li放在一行。
2、给父元素设置 font-size: 0，在 inline-block 元素上重新设置 font-size。
3、设置浮动float：left。
4、display：flex。
一般通用的是float和flex。
三、inline-block 导致父元素增高若干像素
可以通过给 inline-block 元素设置 vertical-align: top。
eg: li {
vertical-align:top;
display:inline-block
}