display：block，inline，inline-block的区别

一、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带来的空白问题时，使用浮动。

四、 inline-block和float的区别

虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:

1. 文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

2. 水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的[关系]

3. 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

4. 空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴

5. IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。