css display属性

在CSS中，使用display属性可以定义盒的类型，如：div、span
盒的类型大致分为两种：inline和block。如：div默认为block（一整行，类似块级），span默认inline

，内容有多少，占用空间就是多少。不过可以通过display来修改默认表现方式。我曾使用过的，

display=“none”将元素隐藏

inline-block类型：属于block盒类型，但显示时具有inline类盒型的特点。并列显示默认的对齐方式是
底部对齐，可以用vertical-align修改，可以用这属性来做水平菜单。

//inline-block和inline是有区别的，前者仍属于block，所以有高宽的属性，而后者没有。

inline-table类型：是一种表格相关类型，IE 8+及其它主浏浏览器均支持。如果要做成文字环绕表格的
效果，就可以使用inline-table了，修改table的样式。
//<style>table{display:inline-table;}</style>

元素	所属类型	说明
table	table	此元素会作为块级表格来显示，表格前后带有换行符。
tabel	inline-table	此元素会作为内联表格来显示，表格前后带有换行符。
tr	table-row	此元素会作为一个表格行显示
td	table-cell	此元素会作为一个表格单元格显示
th	table-cell	此元素会作为一个表格单元格显示
tbody	table-row-group	此元素会作为一个或多个行的分组来显示
thead	table-header-group	此元素会作为一个或多个行的分组来显示
tfoot	table-footer-group	此元素会作为一个或多个行的分组来显示
col	table-column	此元素会作为一个单元格列显示
colgroup	table-column-group	此元素会作为一个或多个列的分组来显示
caption	table-caption	此元素会作为一个表格标题显示

run-in类型和compact类型：元素被指定为run-in或者compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型元素内部，而compact类型被放置在block元素的左边。这两个属性并没得到普及。

none类型：将display的值指定为none之后，改元素将不会显示。PS：与visibility:hidden不同的是，display:none的元素将不会占据原空间，而visibility仍会占据原空间。

display的值：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
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>）
inherit	规定应该从父元素继承 display 属性的值。