css 之 display:inline-block 布局

1. 解释一下 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 后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block 的效果几乎和浮动一样，但也有不同，接下来讲一下 inline-block 和浮动的比较。

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

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

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

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

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

>> 乍一看两个都能做到几乎相同的效果，（仔细看看 display：inline-block 中有间隙问题，这个留到下面再讲）

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

图四：

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

3.inline-block 存在的小问题：

　　a. 上面可以看到用了 display:inline-block 后，存在间隙问题，间隙为 4 像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

　　b.去除空隙的方法：
　　1. 对父元素添加，{font-size:0}，即将字体大小设为 0，那么那个空白符也变成 0px，从而消除空隙
　　现在这种方法已经可以兼容各种浏览器，以前 chrome 浏览器是不兼容的
图一：

　　c.浏览器兼容性：ie6/7 是不兼容 display：inline-block 的所以要额外处理一下：
　　在 ie6/7 下：
　　对于行内元素直接使用 {dislplay:inline-block;}
　　对于块级元素：需添加 {display:inline;zoom:1;}

4. 总结:

　　display：inline-block 的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
　　a. 对于横向排列东西来说，我更倾向与使用 inline-block 来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
　　b. 对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给 inline-block 了。

作者：Ry-yuan

如需转载请标明出处，本文地址：http://www.cnblogs.com/Ry-yuan/p/6848197.html

欢迎访问我的博客：http://ry-yuan.me

>>css 布局系列到此告一段落。