display：inline-block,block,inline的区别与用法

一.首先要了解什么是块级元素与行级元素

块级元素

大家在学习的HML的过程中可能已经发现，有些标签非常霸道，它是独占一行的，别的元素（即标签）不能和它共享同一行，其后的多个block元素也自动换行，可以设置width，height，设置了width后即使该行还有剩余的位置，也同样独占一行，同样也可以设置margin和padding属性。

PS：常见的块级元素：h1~h6，div ，ul，form，p等

    
    
    
    
    


    

        
 1
        
 2
        
 3
    

效果如图：

行级元素

行级元素又称行内元素，与其他元素在同一行上，行内元素可以容纳其他行内元素，但不可以容纳块元素，无法定义高度和宽度，可以定义margin-left和margin-right，但不可以定义margin-top和margin-bottom。

display:inline-block，block，inline元素的区别

1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，常见的inline-block元素有两个：img元素和input元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。此外，对于块元素，IE6和IE7不能识别“display：inline-block”，意思就是加不加“display：inline-block”都对页面没有影响，解决方法是：在IE6和IE7中用“display：inline；*zoom：1；”来代替“display：inline-block”。但对于行内元素，则不存在兼容性问题，所有浏览器都可以识别，可以正常使用。当然IE6和IE7也逐渐淡出历史舞台。

例：

    
    
    


     

        display:inline 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用
内容内容内容内容内容内容内容
内容内容内容内容内容内容
     
     

        display:inline-block  既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding
内容内容内容内容内容内容内容
内容内容内容内容内容内容
     
     

        display:block 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding 
内容内容内容内容内容内容内容
内容内容内容内容内容内容
     

效果如图：

需要注意的是：
低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;所以理论上ie是不识别的，但是在 ie 内核下有个部分叫做 hasLayout，只要触发了它，这个元素就可以设置高宽从而使行级元素拥有了display:inline-block属性的表象。