display:inline-block布局

所有的主流浏览器都支持display属性，它规定了元素应该生成的框的类型。

display几个常用的属性值：inline，block，inline-block

• inline（行内元素）:
  1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
  2. 不能更改元素的height，width的值，大小由内容撑开. 
  3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
• block（块级元素）:
  1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
  2. 能够改变元素的height，width的值. 
  3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
•  inline-block（融合行内于块级）:
  1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  2. 用通俗的话讲，就是不独占一行的块级元素。

display：inline-block后块级元素能够在同一行显示，效果几乎和浮动一样但还稍有不同。

2.inline-block布局 vs 浮动布局

    a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

    b.相同之处：能在某程度上达到一样的效果

---

我们先来看看这两种布局：
图一：display：inline-block

图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：
 

c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三： 
 

图四： 

>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。 

用了display：inline-block后，孩子间存在间隙问题，间隙为4px，原因是换行引起的，因为我们写标签时通常会在标签结束服后顺手打回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个空白符。

 去除间隙的方法：

对父元素添加font-size：0，即将字体大小设为0，那么那个空白符也变成0px，从而消除间隙。

参考CSS之display：inline-block布局

float VS.Inline-block

两者都是很常用的布局方式。

• 如果需要垂直居中，使用inline-block。

• inline-block有空白字符压缩的问题。

• 使用float，注意要清除浮动。

• 没有特别推荐用哪种，看个人习惯。