CSS display屬性的值及做用

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。分別的意思是：

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

二、inline： display的默認屬性。將元素顯示爲內聯元素，元素先後沒有換行符。咱們知道內聯元素是沒法設置寬高的，因此一旦將元素的display 屬性設爲 inline， 設置屬性height和width是沒有用的。此時影響它的高度通常是內部元素的高度（font-size）和padding。

三、block： 將元素將顯示爲塊級元素，元素先後會帶有換行符。設置爲block後，元素能夠設置width和height了。元素獨佔一行。

四、inline-block：行內塊元素。這個屬性值融合了inline 和 block 的特性，便是它既是內聯元素，又能夠設置width和height。

看例子

.inline{
    display:inline; 
    width:100px; 
    height:100px; 
    padding:10px; 
    background-color:red;
}
.block{
    display:block; 
    width:100px; 
    height:100px; 
    padding:10px;
    background-color:green;
}
.inline-block{
    display:inline-block; 
    width:100px;
    height:100px; 
    padding:10px;
    background-color:blue;
}


<div class="wrap">
    <div class="inline">
    inline
    </div>inline
    <div class="block">
    block
    </div> block
    <div class="inline-block">
    inline-block
    </div>inline-block
</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 中刪除。