一、特性介绍
1. display:block
- 块级元素会单独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
- 块级元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行；
- 块级元素可以设置margin和padding属性。
1. display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
- inline元素设置width,height属性无效；
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
1. display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的在同行展示的特性。 ** 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。**
二、inline-block的那些事
- inline-block 元素也可以设置 vertical-align属性（因为这个垂直对齐属性只对 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素）。
- HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。
举例：
每个a之间都会有一个空隙，这个空隙是因为块级元素会换行，.HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙
如何取消inline-block产生的空隙？
方法一
- 浏览器 margin值(左右)
- 火狐 margin:-4px
- chrome margin:-3px
- IE margin:-2px
方法二
在父元素的css中设置word-spacing负值，或者给父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
- 浏览器 word-spacing
- 火狐 word-spacing:-8px
- chrome word-spacing:-6px
- IE word-spacing:-4px
兼容性方面
很遗憾，IE7以下的浏览器不支持inline-block，但并非完全不支持
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：
inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果 b.相同之处：能在某种程度上达到一样的效果
- inline-block模式
- 浮动模式
如果高度不等还会出现参差不齐的情况
但使用display:inline-block 就不会参差不齐的情况，排列会比较整齐
总结
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
- 对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
- 对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
