CSS 3的display：盒類型詳解
來源：程序員人生 發布時間：2014-12-09 08:58:05 閱讀次數：4703次
在CSS中，使用display屬性來定義盒的類型。整體來講，盒類型分為兩類：inline和block。如div默許是block，span默許是Inline。可以通過display修改默許的表現方式。
<!DOCTYPR>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf⑻"/>
<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類型：是1種表格相干類型，IE 8+及其它主瀏閱讀器均支持。更多表格相干類型見后文。
首先，看1個未使用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 |
此元素會作為1個表格行顯示 |
| td |
table-cell |
此元素會作為1個表格單元格顯示 |
| th |
table-cell |
此元素會作為1個表格單元格顯示 |
| tbody |
table-row-group |
此元素會作為1個或多個行的分組來顯示 |
| thead |
table-header-group |
此元素會作為1個或多個行的分組來顯示 |
| tfoot |
table-footer-group |
此元素會作為1個或多個行的分組來顯示 |
| col |
table-column |
此元素會作為1個單元格列顯示 |
| colgroup |
table-column-group |
此元素會作為1個或多個列的分組來顯示 |
| caption |
table-caption |
此元素會作為1個表格標題顯示 |
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的1個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
下1篇：CSS：7個你可能不認識的單位
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
