display:inline display:block display:inline-block内联块元素

display:inline这个是将元素转化为内联元素,内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一个元素写
{
display:inline;

width:值;

height:值;

}

那么width和height属性就会失效;
display:inline-block这个表示元素 对内具有块级元素的宽和高的属性,即你可以对它设定宽和高,对外却具有内联元素的无换行符特性,这个属性IE8以上才支持,对于IE6和IE7不支持这个值,但是只要他们的元素触发了haslayout属性,他们的内联元素便具有inline-block的特性了,如果haslayout属性不知道的可以百度一下;
display:block这个是将元素转化为块级元素,有宽和高的属性,元素前后都有一个换行符,这个应该不用多讲了吧.

 

内联 内联+块状 块状
当你想让内联元素能有自己的宽度和高度的时候而又不想换行的时候 用inline-block很爽哦

 

简单讲就是display:inline 转化成内联元素，不换行；display:block转换成块元素，换行；display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。