CSS 3的display：盒类型详解

来源：互联网发布：软件项目合同范本编辑：程序博客网时间：2024/04/30 22:21

在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/

表格相关类型汇总

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

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>

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

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个你可能不认识的单位

0 0