区别 block,inline-block,inline的

1.display:block

a:给元素设置该属性或者说block元素会独占一行,多个元素会各起新的一行,默认情况下block元素宽度自动填满父元素的宽度.

b:可以设置width和height

c:可以设置margin属性和padding属性

2.display:inline

a:给元素设置给属性或者inline元素不会独占一行,多个元素会排列在同一行,直到一行排不下去,才会新起一行

b:设置width和height无效,其高度根据元素的内容变化,如文字或者图片高度,不可修改

c:水平方向的padding和margin值有效,但是数值方向上的padding和margin值不会产生边距效果

3.display:inline-block

a:设置该属性可以将元素呈现块状特性(内联对象),即元素对象呈现inline对象,元素对象的内容呈现block对象特性

b:可以设置width和height,具有block的宽高特性又具有inline的同行特性

注意:

1.低版本的IE是不支持inline-block属性的,所以在IE中使用该属性理论上是不会识别的.但是使用该属性在IE下会自动触发layout,从而

内联元素拥有了display:inline-block属性的表象,从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性

无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然

还是行布局，而不会如Opera中块元素呈递为内联对象。

2.在IE下元素如何实现display:inline-block效果

两种方法:

a:先使用display:inline-block属性触发块元素,然后再定义display:inline.让块状元素呈现内联对象(两个display需要放在两个css声明中 才会生效,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设置回inline或者block,layout不会消失的)

a{display:inline-block}
a{display:inline}

b:直接让块元素设置为内联对象(display:inline),然后出发块元素的layout(如:zoom:1)

div {display:inline; zoom:1;}

补充:一般常用的就是这三种属性来调整元素的布局,其实display的参数远远不止这三种,这些只是比较常用而已.