CSS Display(顯示) 與 Visibility（可見性）
? ?在平時的開發(fā)過程中，總是會遇到一些文字在特定的場景下顯示或者隱藏來達到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素?？雌饋砻菜埔粯?，但是他們還是有一定的區(qū)別的。
display定義和用法
display 屬性規(guī)定元素應該生成的框的類型。
說明
這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經(jīng)定義的顯示層次結構。對于 XML，由于 XML 沒有內(nèi)置的這種層次結構，所有 display 是絕對必要的。
可能的值
值 ? ? ? ? ? ? ? ??描述
none ? ?此元素不會被顯示。 ? ?
block ? ?此元素將顯示為塊級元素，此元素前后會帶有換行符。 ? ?
inline ? ?默認。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。 ? ?
inline-block ? ?行內(nèi)塊元素。（CSS2.1 新增的值） ? ?
list-item ? ?此元素會作為列表顯示。 ? ?
run-in ? ?此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。 ? ?
compact ? ?CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 ? ?
marker ? ?CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 ? ?
table ? ?此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。 ? ?
inline-table ? ?此元素會作為內(nèi)聯(lián)表格來顯示（類似 <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 ? ?規(guī)定應該從父元素繼承 display 屬性的值。
? 實例： ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</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ī)定元素是否可見。
提示：即使不可見的元素也會占據(jù)頁面上的空間。請使用 "display" 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。
說明
這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍占據(jù)其本來的空間，不過可以完全不可見。值 collapse 在表中用于從表布局中刪除列或行。
可能的值
值 ? ? ? ? ? ? ? ? ??描述
visible ? ?默認值。元素是可見的。 ? ?
hidden ? ?元素是不可見的。 ? ?
collapse ? ?當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上，會呈現(xiàn) ? ? ? ? ? ? ? ? ? ? 為 "hidden"。 ? ?
inherit ? ?規(guī)定應該從父元素繼承 visibility 屬性的值。 ? ?
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</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 - 塊和內(nèi)聯(lián)元素
塊元素是一個元素，占用了全部寬度，在前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度，不強制換行。
內(nèi)聯(lián)元素的例子：
<span>
<a>
如何改變一個元素顯示
可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標準。
下面的示例把列表項顯示為內(nèi)聯(lián)元素：
li {display:inline;}
下面的示例把span元素作為塊元素：
span {display:block;}
注意：變更元素的顯示類型看該元素是如何顯示，它是什么樣的元素。例如：一個內(nèi)聯(lián)元素設置為display:block是不允許有它內(nèi)部的嵌套塊元素。
