display可能的属性值：
| 值 | 描述 |
| none |
缺省值。像行内元素类型一样显示 |
| block |
块类型。默认宽度为父元素宽度，可设置宽高，换行显示 |
| inline |
行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示 |
| inline-block |
默认宽度为内容宽度，可以设置宽高，同行显示 |
| list-item |
像块类型元素一样显示，并添加样式列表标记 |
| inherit |
规定应该从父元素继承 display 属性的值 |
| table |
此元素会作为块级表格显示(类似<table>)，表格前后有换行符 |
| inline-table |
此元素会作为内联表格显示(类似<table>)，表格前后无换行符 |
| table-row-group |
此元素会作为一个或多个行的分组显示(类似<tbody>) |
| table-header-group |
此元素会作为一个或多个行的分组显示(类似<thead>) |
| table-footer-group |
此元素会作为一个或多个行的分组显示(类似<tfoot>) |
| table-row |
此元素会作为一个表格行显示(类似<tr>) |
| table-column-group |
此元素会作为一个或多个列的分组显示(类似<colgroup>) |
| table-column |
此元素会作为一个单元格列显示(类似<col>) |
| table-cell |
此元素会作为一个表格单元格显示(类似<td> 和<th>) |
| table-caption |
此元素会作为一个表格标题显示(类似<caption>) |
display:block、display:inline、display:inline-block等都是很常见的。
1）display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width和height属性，即使设置了宽度，仍然是独占一行。
block元素可以设置margin和padding属性。
2）display:inline
inline元素不会独占一行，多个相邻的inline元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width和height属性无效。
inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。
3）display:inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内，可以设置width和height属性，也可以设置margin和padding属性。
下面例子谈谈不是很常见的display:list-item和display:table、display:table-cell。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#span1 {
display:list-item;
list-style-position:inside;
}
#span2 {
display:list-item;
list-style:square;
list-style-position:inside;
}
#main {
display: table;
border-collapse: collapse;
}
#row1 {
display: table-row;
border: 1px solid grey;
}
#row2 {
display: table-row;
border: 1px solid grey;
}
#col1 {
display: table-cell;
border: 1px solid grey;
}
#col2 {
display: table-cell;
border: 1px solid grey;
}
</style>
</head>
<body>
<span id="span1">first</span>
<span id="span2">second</span>
<div id="main">
<div id="row1">
<div id="col1">one</div>
<div id="col2">two</div>
</div>
<div id="row2">
<div id="col1">three</div>
<div id="col2">four</div>
</div>
</div>
</body>
</html>设置display:list-item时，默认list-style为disc，可以设置list-style为square或circle，但一定要设置list-style-position：inside，否则list-style显示不出来。