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>
5、none类型:将display的值指定为none之后,改元素将不会显示。PS:与visibility:hidden不同的是,display:none的元素将不会占据原空间,而visibility仍会占据原空间。
原文首发:http://www.ido321.com/1300.html
下一篇:CSS:7个你可能不认识的单位
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。