介绍display的各种属性
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: 元素被当成列表显示
