CSS Display(顯示) 與 Visibility（可見(jiàn)性）
在平時(shí)的開(kāi)發(fā)過(guò)程中，總是會(huì)遇到一些文字在特定的場(chǎng)景下顯示或者隱藏來(lái)達(dá)到我們想要的效果，css中display和visibility語(yǔ)法，他們都可以隱藏和顯示html元素。看起來(lái)貌似一樣，但是他們還是有一定的區(qū)別的。
display定義和用法
display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。
說(shuō)明
這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類(lèi)型。對(duì)于 HTML 等文檔類(lèi)型，如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，由于 XML 沒(méi)有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。
可能的值
值 描述
none 此元素不會(huì)被顯示。
block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）
list-item 此元素會(huì)作為列表顯示。
run-in 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
compact CSS 中有值 compact，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過(guò)由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。
table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 <table>），表格前后帶有換行符。
inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類(lèi)似 <table>），表格前后沒(méi)有換行符。
table-row-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tbody>）。
table-header-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <thead>）。
table-footer-group 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 <tfoot>）。
table-row 此元素會(huì)作為一個(gè)表格行顯示（類(lèi)似 <tr>）。
table-column-group 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類(lèi)似 <colgroup>）。
table-column 此元素會(huì)作為一個(gè)單元格列顯示（類(lèi)似 <col>）
table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似 <td> 和 <th>）
table-caption 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類(lèi)似 <caption>）
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>visibility定義和用法
visibility 屬性規(guī)定元素是否可見(jiàn)。
提示：即使不可見(jiàn)的元素也會(huì)占據(jù)頁(yè)面上的空間。請(qǐng)使用 "display" 屬性來(lái)創(chuàng)建不占據(jù)頁(yè)面空間的不可見(jiàn)元素。
說(shuō)明
這個(gè)屬性指定是否顯示一個(gè)元素生成的元素框。這意味著元素仍占據(jù)其本來(lái)的空間，不過(guò)可以完全不可見(jiàn)。值 collapse 在表中用于從表布局中刪除列或行。
可能的值
值 描述
visible 默認(rèn)值。元素是可見(jiàn)的。
hidden 元素是不可見(jiàn)的。
collapse 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn) 為 "hidden"。
inherit 規(guī)定應(yīng)該從父元素繼承 visibility 屬性的值。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一個(gè)圖片雖然隱藏了，但是位置還是被占據(jù)的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個(gè)元素，占用了全部寬度，在前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。
內(nèi)聯(lián)元素的例子：
<span>
<a>
如何改變一個(gè)元素顯示
可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁(yè)面看起來(lái)是以一種特定的方式組合，并仍然遵循web標(biāo)準(zhǔn)。
下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素：
li {display:inline;}
下面的示例把span元素作為塊元素：
span {display:block;}
注意：變更元素的顯示類(lèi)型看該元素是如何顯示，它是什么樣的元素。例如：一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素。
