css的display属性如下:
none: 元素不会生成框，元素不显示，且在页面中不占据位置。
inline: 元素被当成内联元素(行内元素)对待，内联元素的默认值。
inline-block: 块级元素一方面被当成内联元素，因此可以使块级元素和内联元素可以同一行显示，但是另一方面这个元素却可以应用块级元素上的属性比如设置宽高，设置上下边距:
未设置inline-block属性前:
<html> <head> <title>inlineBlock</title> <style type = "text/css"> div { background: orange; } span { background: red; } </style> </head> <body> <div> 我是div </div> <span> 我是span </span> </body> </html>
运行结果(火狐中)：
加入inline后
<html> <head> <title>inlineBlock</title> <style type = "text/css"> div { background: orange; display:inline-block; /*加入了块级元素才有效的属性*/ width: 100px; height: 100px; margin-top: 20px; margin-bottom: 20px; } span { background: red; } </style> </head> <body> <div> 我是div </div> <span> 我是span </span> </body> </html>
运行结果(火狐中):
可以看到div被当成行内元素，但是却能够设置宽度和上下边距，这些属性对行内元素是无效的。
block: 元素被当成块级元素对待，块级元素默认值。
run-in: 元素会根据上下文来决定作为块级元素还是行内元素显示，做出判断的依据是:
1 若这个run-in元素A包含一一个块级元素B，那么这个元素A被当成块级元素。
2 若这个run-in元素A紧接着一个块级元素B，那么这个元素A会被当成行内元素而包含在块级元素B里面。注意，这个run-in元素A不能进入已经以一个run-in为开头行的块元素，也不能进入自身就有run-in属性的块元素。
3 若这个run-in元素A紧接着一个行内元素，那么这个元素A被当成块级元素
table: 元素被当成块级表格(类似<table>)
inline-table: 元素被当成内联表格(类似<table>)
table-row-group: 元素被当成一个或者多个行分组(类似<tbody>)
table-row: 元素被当成一个行(类似<tr>)
table-head-group: 元素被当成一个行分组(类似<thead>)
tale-column-group: 元素被当成一个或多个列分组(类似<colgroup>)
table-column: 元素被当成一个单元格列(类似<col>)
table-cell: 元素被当成一个单元格(类似<td>和<th>)
table-caption: 元素被当成一个标题(类似<caption>)
table-footer-group: 元素被当成一个或多个行显示(类似<tfoot>)
list-item: 元素被当成列表显示