CSS教程:css的display属性

作者: 来源: 更新时间:2013-03-04 11:43:01 点击:

<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: 元素被当成列表显示