CSS Display(顯示) 與 Visibility（可見性）
? ?在平時的開發(fā)過程中，總是會遇到一些文字在特定的場景下顯示或隱藏來達(dá)到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素?？雌饋砻菜埔粯?，但是他們還是有一定的差別的。
display定義和用法
display 屬性規(guī)定元素應(yīng)該產(chǎn)生的框的類型。
說明
這個屬性用來定義建立佈局時元素產(chǎn)生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹(jǐn)慎會很危險，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對於 XML，由於 XML 沒有內(nèi)建的這種層次結(jié)構(gòu)，所有 display 是絕對必要的。
可能的值
#? ? ? ? ? ? ? ??#說明
##none ? ?此元素不會被顯示。 ? ?
block ? ?此元素將顯示為區(qū)塊級元素，此元素前後會帶有換行符號。 ? ?
inline ? ?預(yù)設(shè)。此元素會被顯示為內(nèi)聯(lián)元素，元素前後沒有換行符號。 ? ?
inline-block ? ?行內(nèi)區(qū)塊元素。 （CSS2.1 新增的值） ? ?
list-item ? ?此元素顯示為清單。 ? ?
run-in ? ?此元素會依上下文顯示為區(qū)塊級元素或內(nèi)嵌元素。 ? ?
compact ? ?CSS 中有值 compact，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。 ? ?
marker ? ?CSS 中有值 marker，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。 ? ?
table ? ?此元素會以區(qū)塊級表格顯示（類似 <table>），表格前後則有換行符號。 ? ?
inline-table ? ?此元素會作為內(nèi)嵌表格顯示（類似 <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 ? ?此元素會顯示為表格標(biāo)題（類似<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ī)定元素是否可見。
提示：即使不可見的元素也會佔(zhàn)據(jù)頁面上的空間。請使用 "display" 屬性來建立不佔(zhàn)據(jù)頁面空間的不可見元素。
說明
這個屬性指定是否顯示一個元素產(chǎn)生的元素方塊。這意味著元素仍佔(zhàn)據(jù)其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表佈局中刪除列或行。
可能的值
值? ? ? ? ? ? ? ? ??描述
visible ? ?預(yù)設(shè)值。元素是可見的。 ? ?
hidden ? ?元素是看不見的。 ? ?
collapse ? ?當(dāng)在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔(zhàn)據(jù)的空間會留給其他內(nèi)容使用。若此數(shù)值被用在其他的元素上，會呈現(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>
<!-- 注意第一個圖片雖然隱藏了，但是位置還是被占據(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 - 區(qū)塊和內(nèi)聯(lián)元素
#區(qū)塊元素是一個元素，佔(zhàn)用了全部寬度，在前後都是換行符。
區(qū)塊元素的範(fàn)例：
<h1>
#<p>
<div>
#內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。
內(nèi)聯(lián)元素的範(fàn)例：
<span>
#<a>
##如何改變一個元素顯示
可以更改內(nèi)聯(lián)元素和區(qū)塊元素，反之亦然，可以使頁面看起來以特定的方式組合，並且仍然遵循web標(biāo)準(zhǔn)。 下面的範(fàn)例把清單項(xiàng)目顯示為內(nèi)聯(lián)元素：li {display:inline;}
下面的範(fàn)例把span元素當(dāng)作區(qū)塊元素：
span {display:block;}
#
