CSS笔记之使用display:inline-block;的布局

display常用几个属性值

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

例子

inline-block布局 vs 浮动布局

1. 不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
   
   可以看出，inline-block会有空隙，而且浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
   

inline-block的小问题

1. 存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的：

   去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙

2. 浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：

在ie6/7下：
　　对于行内元素直接使用{dislplay:inline-block;}
　　对于块级元素：需添加{display:inline;zoom:1;}