【CSS显示display】

【CSS显示display】_第1张图片
CSS显示display


display属性

浮动、定位对display的影响;

行元素与块元素默认的display类型;

属性类型:

display: block;(显示为块元素)

display: inline;(显示为行元素)

display: inline-block;(行内块元素,可设置宽高)

display: table;(表格显示)

display: table-cell;(单元格显示)


inline-block的兼容性问题

兼容性:

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。


解决IE6、IE7兼容性的方法:

1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。

2、直接设置display:inline,使用zoom:1触发layout。


兼容所有浏览器的方法是:

display:inline-block;

*display:inline;

*zoom:1;


display: none; 与visibility: hidden; 的区别

display: none; 表示隐藏,既隐藏内容,也隐藏大小;

visibility: hidden; 只隐藏内容,没有隐藏大小。

你可能感兴趣的:(【CSS显示display】)