CSS总结（一）—— display三种元素（区别、重点、扩展）

display元素：
block/inline/inline-block;

1、display:block(块级元素)：
会独占一行
可设其宽、高、margin、padding属性
可容纳内联元素与其他块元素

2、display：inline(行内元素)：
与其他元素在同一行
设置宽、高无效
padding-left/right，margin-left/right设置会产生边距效果
竖直方向的padding-top/bottom，margin-top/bottom不会产生边距效果

3、display：inline-block（行内块元素）：
既可设置宽、高，又默认不换行
可设置vertical-align属性
在字体大小不为零的情况下，会产生元素间的空隙，可在父元素设置 font-size：0 ，也可用letter-spacing设为负值 去除此空隙
浮动是用display：inline-block(即 将块元素套在内联元素里，对内联元素进行浮动)

★ display：inline-block 在IE下如何实现：

1、将display先后放在两个css声明中，定义一个inline-block，再定义一个inline。
div{display：inline-block；}
div{display：inline；}

2、直接让块元素设为内联对象呈递，再触发块元素的layout（如：zoom：1）
div{display：inline；zoom：1；}