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；}