CSS display屬性的值及作用

標籤：ade   class   分行符號   padding   idt   無法   而且   塊元素   pre   

display 的屬性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分別的意思是：

1、none： 元素不會顯示，而且改元素現實的空間也不會保留。但有另外一個 visibility: hidden， 是保留元素的空間的。

2、inline： display的預設屬性。將元素顯示為內嵌元素，元素前後沒有分行符號。我們知道內嵌元素是無法設定寬高的，所以一旦將元素的display 屬性設為 inline， 設定屬性height和width是沒有用的。此時影響它的高度一般是內部元素的高度（font-size）和padding。

3、block： 將元素將顯示為區塊層級元素，元素前後會帶有分行符號。設定為block後，元素可以設定width和height了。元素獨佔一行。

4、inline-block：行內塊元素。這個屬性值融合了inline 和 block 的特性，即是它既是內嵌元素，又可以設定width和height。

看例子

 1 .inline{ 2     display:inline;  3     width:100px;  4     height:100px;  5     padding:10px;  6     background-color:red; 7 } 8 .block{ 9     display:block; 10     width:100px; 11     height:100px; 12     padding:10px;13     background-color:green;14 }15 .inline-block{16     display:inline-block; 17     width:100px;18     height:100px; 19     padding:10px;20     background-color:blue;21 }22 23 24 <div class="wrap">25     <div class="inline">26     inline27     </div>inline28     <div class="block">29     block30     </div> block31     <div class="inline-block">32     inline-block33     </div>inline-block34 </div>

這裡提及下內嵌元素和區塊層級元素的一些特點：

內嵌元素：

  和其他元素都在一行上；
   元素的高度、寬度及頂部和底部邊距不可設定；
   元素的寬度就是它包含的文字或圖片的寬度，不可改變。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

區塊層級元素：

   每個區塊層級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個區塊層級元素獨佔一行）；
   元素的高度、寬度、行高以及頂和底邊距都可設定。
   元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

內聯塊狀元素：

   和其他元素都在一行上；
   元素的高度、寬度、行高以及頂和底邊距都可設定。

常用的內聯塊狀元素有：
<img>、<input>

 

其他display的屬性值不是很常用，其具體的含義如下：

list-item：     此元素會作為列表顯示。
run-in：     此元素會根據上下文作為區塊層級元素或內嵌元素顯示。
table：     此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有分行符號。
inline-table：     此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有分行符號。
table-row-group：     此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group：     此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group：     此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row：     此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group：     此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column：     此元素會作為一個儲存格列顯示（類似 <col>）
table-cell：     此元素會作為一個表格儲存格顯示（類似 <td> 和 <th>）
table-caption：     此元素會作為一個表格標題顯示（類似 <caption>）
inherit：     規定應該從父元素繼承 display 屬性的值。

另外有兩個已經廢除的屬性值：
compact     CSS 中有值 compact，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
marker     CSS 中有值 marker，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。

CSS display屬性的值及作用