CSS的元素的隱藏與顯示

顯示與隱藏

1、介紹：

display：使段落生出行內框

visibility ：屬性規定元素是否可見。

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

3、visibility 屬性

值	描述
visible	預設值。元素是可見的。
hidden	元素是不可見的。
collapse	當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
inherit	規定應該從父元素繼承 visibility 屬性的值。

4、“display:none”和“visibility:hidden"

（1）display:none：元素被隱藏之後，不佔用原來的位置

（2）visibility:hidden：元素隱藏之後，占原來的位置

5、例

  h1{          visibility: hidden;//隱藏佔用元素空間          display: none;//隱藏不佔用空間      }  p{          display: inline;//改變為內嵌元素      }  h2{          display: block;//改變區塊層級元素      }

相關推薦：

詳解CSS元素置中布局的簡單方法