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>

元素所属类型说明tabletable此元素会作为块级表格来显示，表格前后带有换行符。tabelinline-table此元素会作为内联表格来显示，表格前后带有换行符。trtable-row此元素会作为一个表格行显示tdtable-cell此元素会作为一个表格单元格显示thtable-cell此元素会作为一个表格单元格显示tbodytable-row-group此元素会作为一个或多个行的分组来显示theadtable-header-group此元素会作为一个或多个行的分组来显示tfoottable-footer-group此元素会作为一个或多个行的分组来显示coltable-column此元素会作为一个单元格列显示colgrouptable-column-group此元素会作为一个或多个列的分组来显示captiontable-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此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 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 属性的值。