浅谈float和display:inline-block

1、首先先解释下display的几个属性:inline,block,inline-block;

(1)inline:

      a、把元素变成行内元素,也就是它可以和其它的元素共占据一行。

      b、元素的大小由其内容自动撑开,其宽高是不可修改的。

      c、可以使用margin、padding,top,bottom产生边距。

      eg:

  ...

  ...  

  ...  

  ...  

    

    

(2)block:

  a、把元素变成块级元素,让他独占一行,在没有对其设置自身宽度的时候,他会默认填满父元素的宽度。 

  b、可以对元素设置宽高属性。

  c、与inline属性不同,可以对其设置margin,padding,以及top,bottom.left,right产生边距效果。

  eg:

     


    

...


    


    

    ,
      ,

          
    1. ,
      ,

          
          

      (3)inline-block:

      inline-block可以用一个表达式来理解他:

      inline-block=inline+block;

      它相当于结合了inline属性和block属性,可以说他是不独占一行的块级元素也不为过。

      我们知道ul,li的默认display属性是block,接下来用实例来理解:

      我们未对li设置display: inline-block的时候,每个li默认独占一行。如下:

      浅谈float和display:inline-block_第1张图片

      我们对li元素加上display: inline-block后,效果如下:

      2、png

      这时候li元素就变成了可以在一行内显示的块元素,看看这个效果,大家是不是觉得有点跟浮动float差不多呢?没错,是跟浮动差不多,但是二者还是有明显的区别的,为了效果更直观,我们给第二个和第四个li元素给一个不同的背景色,然后和浮动的进行对比,效果很直观。

      浅谈float和display:inline-block_第2张图片

      我们发现二者有明显的区别,使用inline-block 的方式每个li元素之间明显有间隙,间隙为4像素,这个问题是由于换行引起的,这是结束标签后的回车符(空白符)造成的。解除这个缺点的方法,就是对其父元素添加font-size:0,即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙 ,现在这种方法已兼容各种浏览器。

      那么问题来了,有些宝宝会问,我到底使用浮动呢还是display-inline?我觉得这个要根据实际情况来定,像横向布局的,就用display:inline-block;而浮动布局真正适合的类型是文字的环绕布局。

      你可能感兴趣的:(浅谈float和display:inline-block)