1、首先先解释下display的几个属性:inline,block,inline-block;
(1)inline:
a、把元素变成行内元素,也就是它可以和其它的元素共占据一行。
b、元素的大小由其内容自动撑开,其宽高是不可修改的。
c、可以使用margin、padding,top,bottom产生边距。
eg:
<span>...</span>
<a>...</a>
<em>...</em>
<input>...</input>
<textarea>...</textarea>
<select>...</select>
(2)block:
a、把元素变成块级元素,让他独占一行,在没有对其设置自身宽度的时候,他会默认填满父元素的宽度。
b、可以对元素设置宽高属性。
c、与inline属性不同,可以对其设置margin,padding,以及top,bottom.left,right产生边距效果。
eg:
<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>
(3)inline-block:
inline-block可以用一个表达式来理解他:
inline-block=inline+block;
它相当于结合了inline属性和block属性,可以说他是不独占一行的块级元素也不为过。
我们知道ul,li的默认display属性是block,接下来用实例来理解:
我们未对li设置display: inline-block的时候,每个li默认独占一行。如下:
我们对li元素加上display: inline-block后,效果如下:
这时候li元素就变成了可以在一行内显示的块元素,看看这个效果,大家是不是觉得有点跟浮动float差不多呢?没错,是跟浮动差不多,但是二者还是有明显的区别的,为了效果更直观,我们给第二个和第四个li元素给一个不同的背景色,然后和浮动的进行对比,效果很直观。
我们发现二者有明显的区别,使用inline-block 的方式每个li元素之间明显有间隙,间隙为4像素,这个问题是由于换行引起的,这是结束标签后的回车符(空白符)造成的。解除这个缺点的方法,就是对其父元素添加font-size:0,即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙 ,现在这种方法已兼容各种浏览器。
那么问题来了,有些宝宝会问,我到底使用浮动呢还是display-inline?我觉得这个要根据实际情况来定,像横向布局的,就用display:inline-block;而浮动布局真正适合的类型是文字的环绕布局。