display:inline inline-block block

块级元素：默认设置display:block的元素

<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>等

行内元素/内联元素：默认设置display:inline的元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>等

行内块元素：默认设置display:inline-block的元素

<img/>、<input/>、<td>等

一、display：block 块级元素

特点：
1、block元素会独占一行，多个block元素会各自新起一行。
2、width：默认情况下，block元素的宽度自动填满其父元素宽度；即使设置了宽度，block仍然是独占一行。
3、height： 在没有设置高度的情况下，会扩展高度以包含子元素。
4、可以设置margin和padding属性
5、忽略vertical-align

二、display：inline行内元素

1、inline元素不会独占一行，多个相邻的行内元素会排列在一行内，直到排不下再新换一行。
2、设置width和height属性无效，宽度由元素内容决定。非替换行内元素(p、label等)的行框高由line-height决定，替换行内元素(img、input、textarea等)的行框高由height、margin、padding、border决定。
3、margin和padding 在竖直方向上无效，在水平方向上有效。
4、受vertical-align控制（用来指定inline元素或者table-cell表格单元格的垂直对齐方式）
5、受white-space控制（设置如何处理元素内的空白符）
6、水平方向上根据direction依次布局
7、float或者绝对定位时，会转换位block

三、display：inline-block

特点：
1、将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
什么情况下使用？

使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。可以处理图片列表，横向导航栏

使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。