CSS 3的display:盒类型详解

在CSS中,使用display属性来定义盒的类型。总体来说,盒类型分为两类:inline和block。如div默认是block,span默认是Inline。可以通过display修改默认的表现方式。

<!DOCTYPR>

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <title>block and inline elements</title>

    <style type="text/css">

        div

        {

           background:#aaff00;

        }

        span

        {

            background:#ffaa00;

        }

    </style>

</head>

<body>

    <div>div元素1</div>

    <div>div元素2</div>

    <span>span元素1</span>

    <span>span元素2</span>

</body>

</html>

默认的div和span表现形式:http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/

利用dispaly修改,分别在上述的div和span样式中添加如下规则:

//div中添加

display:inline;

//span中添加

display:block;

效果如图:http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/

那display的取值只有这两个吗?那就错了。display的不同取值,就表现出不同的盒类型。

1、inline-block类型:属于block盒类型,但显示时具有inline类盒型的特点。并列显示默认的对齐方式是底部对齐,可以用vertical-align修改。

      利用inline-block制作水平菜单

<html>

<head>

<style type="text/css">

ul{

    margin:0;

    padding:0;

}

li{

    display:inline-block;

    width:100px;

    padding:10px 0;

    background-color:#00ccff;

    border:solid 1px #666666;

    text-align:center;

}

a{

    color:#000000;

    text-decoration:none;

}

</style>

</head>

<body>

    <ul>

        <li><a href="http://www.ido321.com" target="_blank">菜单1</a></li>

        <li><a href="http://www.ido321.com" target="_blank">菜单2</a></li>

        <li><a href="http://www.ido321.com" target="_blank">菜单3</a></li>

        <li><a href="http://www.ido321.com" target="_blank">菜单4</a></li>

    </ul>

</body>

</html>

     效果:http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/

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

2、inline-table类型:是一种表格相关类型,IE 8+及其它主浏浏览器均支持。更多表格相关类型见后文。

      首先,看一个未使用inline-table的示例

<html>

<head>

<style type="text/css">

table{

border:solid 2px #00aaff;

}

td{

border:solid 2px #ccff00;

padding:5px;

}

</style>

</head>

<body>

淡忘~浅思

<table>

    <tr>

        <td>A</td><td>B</td><td>C</td><td>D</td>

    </tr>

    <tr>

        <td>E</td><td>F</td><td>G</td><td>H</td>

    </tr>

    <tr>

        <td>I</td><td>J</td><td>K</td><td>L</td>

    </tr>

</table>

你好

</body>

</html>

     效果是这样的:http://jsfiddle.net/Web_Code/pt0j3b6n/3/embedded/result/

     如果要做成文字环绕表格的效果,就可以使用inline-table了,修改table的样式

table{

display:inline-table;

border:solid 3px #00ffaa;

}

      文字环绕效果就出来了:http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/

       表格相关类型汇总

元素 所属类型 说明
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 此元素会作为一个表格标题显示

3、list-item类型:此类型可以将多个元素作为列表来显示,同时在元素的开头添加列表的标记

      给示例中所有的div设定为list-item类型,用list-style-type将标记指定为空心圆

<html>

<head>

<style type="text/css">

div{

    display:list-item;

    list-style-type:circle;

    margin-left:20px;

}

</style>

</head>

<body>

    <div>div1</div>

    <div>div2</div>

    <div>div3</div>

    <div>div4</div>

</body>

</html>
 
 
4、run-in类型和compact类型:元素被指定为run-in或者compact类型的时候,如果元素后面还有block类型的元素,run-in类型的元素将被包含在block类型元素内部,而compact类型被放置在
 
block元素的左边。这两个属性并没得到普及。关于run-in的一个demo:http://www.zhangxinxu.com/study/201203/css-run-in.html

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

 

原文首发:http://www.ido321.com/1300.html

下一篇:CSS:7个你可能不认识的单位

你可能感兴趣的:(display)