CSS的display属性中inline、block和inline-block的区别

block

块级元素特点：

• 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）

• 2、元素的高度、宽度、行高以及顶和底边距都可设置。

• 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

display: block两个作用：

• 一是将隐藏元素显示出来
• 二是将行内元素转化成块元素

inline

内联元素特点：

• 1、和其他元素都在一行上；

• 2、元素的高度、宽度及顶部和底部边距不可设置；

• 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

display: inline

• 将块元素转化成行内元素

inline-block

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。

inline-block 元素特点：

• 1、和其他元素都在一行上；

• 2、元素的高度、宽度、行高以及顶和底边距都可设置。

display: inline

• 将元素转化成行块元素

除此之外，display还具有一下属性：

display: none

• 隐藏元素和元素的位置

display: table-cell

• 转化成表格单元格
  配合 vertical-align一起用，设置垂直居中