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： 元素不會(huì)顯示，而且改元素現(xiàn)實(shí)的空間也不會(huì)保留。但有另外一個(gè) visibility: hidden， 是保留元素的空間的。

2、inline： display的默認(rèn)屬性。將元素顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。我們知道內(nèi)聯(lián)元素是無(wú)法設(shè)置寬高的，所以一旦將元素的display 屬性設(shè)為 inline， 設(shè)置屬性height和width是沒(méi)有用的。此時(shí)影響它的高度一般是內(nèi)部元素的高度（font-size）和padding。

3、block： 將元素將顯示為塊級(jí)元素，元素前后會(huì)帶有換行符。設(shè)置為block后，元素可以設(shè)置width和height了。元素獨(dú)占一行。

4、inline-block：行內(nèi)塊元素。這個(gè)屬性值融合了inline 和 block 的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置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 inline 27 </div>inline 28 <div class="block"> 29 block 30 </div> block 31 <div class="inline-block"> 32 inline-block 33 </div>inline-block 34 </div>

這里提及下內(nèi)聯(lián)元素和塊級(jí)元素的一些特點(diǎn)：

內(nèi)聯(lián)元素：

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

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

塊級(jí)元素：

?? 每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）；
?? 元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
?? 元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。

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

內(nèi)聯(lián)塊狀元素：

?? 和其他元素都在一行上；
?? 元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>

?

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

list-item： ??? 此元素會(huì)作為列表顯示。
run-in： ??? 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
table： ??? 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符。
inline-table： ??? 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒(méi)有換行符。
table-row-group： ??? 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）。
table-header-group： ??? 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）。
table-footer-group： ??? 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）。
table-row： ??? 此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）。
table-column-group： ??? 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）。
table-column： ??? 此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>）
table-cell： ??? 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>）
table-caption： ??? 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>）
inherit： ??? 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

另外有兩個(gè)已經(jīng)廢除的屬性值：
compact ?? ?CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker ?? ?CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

轉(zhuǎn)載于:https://www.cnblogs.com/hzp-blog/p/6473047.html

總結(jié)

以上是生活随笔為你收集整理的CSS display属性的值及作用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。