CSS Display(顯示) 與 Visibility（可見性）

在平時的開發過程中，總是會遇到一些文字在特定的場景下顯示或隱藏來達到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素。看起來貌似一樣，但是他們還是有一定的差別的。

display定義和用法

display 屬性規定元素應該產生的框的類型。

說明

這個屬性用來定義建立佈局時元素產生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。

可能的值

# #說明

##none 此元素不會被顯示。

block 此元素將顯示為區塊級元素，此元素前後會帶有換行符號。

inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符號。

inline-block 行內區塊元素。（CSS2.1 新增的值）

list-item 此元素顯示為清單。

run-in 此元素會依上下文顯示為區塊級元素或內嵌元素。

compact CSS 中有值 compact，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由於缺乏廣泛支持，已從 CSS2.1 中刪除。

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 屬性的值。

實例：

<!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 屬性規定元素是否可見。

提示：即使不可見的元素也會佔據頁面上的空間。請使用 "display" 屬性來建立不佔據頁面空間的不可見元素。

說明

這個屬性指定是否顯示一個元素產生的元素方塊。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表佈局中刪除列或行。

可能的值

值描述

visible 預設值。元素是可見的。

hidden 元素是看不見的。

collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。若此數值被用在其他的元素上，會呈現為 "hidden"。

inherit 規定應該從父元素繼承 visibility 屬性的值。

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<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 - 區塊和內聯元素

#區塊元素是一個元素，佔用了全部寬度，在前後都是換行符。

區塊元素的範例：

<h1>

#<p>

<div>

#內聯元素只需要必要的寬度，不強制換行。

內聯元素的範例：

<span>

#<a>

##如何改變一個元素顯示

可以更改內聯元素和區塊元素，反之亦然，可以使頁面看起來以特定的方式組合，並且仍然遵循web標準。

下面的範例把清單項目顯示為內聯元素：

li {display:inline;}

下面的範例把span元素當作區塊元素：

span {display:block;}

##注意：變更元素的顯示類型看該元素是如何顯示，它是什麼樣的元素。例如：一個內聯元素設定為display:block是不允許有它內部的巢狀區塊元素。

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> p {display:inline;} span { display:block; } </style> <body> <p>上海银监局召集辖内机构高层开会，发出严控房地产贷款风险的警示。</p> <p>据新华社电住建部通报杭州、深圳楼市散布谣言案例，要求各地依法严肃查处散布谣言扰乱房地产市场秩序的违法违规行为。</p> <br><br> <span> 香港市场成全球募资王</span> <span>混改试点望启动</span> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear