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

 

 

 

 

posted @ 2013-03-03 15:12  chaoguo1234  阅读(748)  评论(0)  编辑  收藏  举报