CSS的元素的隱藏與顯示-css教學-PHP中文網

none

此元素不會被顯示。

block

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

inline

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

inline-block

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

list-item

此元素會顯示為清單。

run-in

#此元素會根據上下文以區塊級元素或內聯元素顯示。

compact

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

marker

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

table

此元素會以區塊級表格顯示（類似），表格前後有換行符號。）。）。）。）。）。

）
inline-table	#此元素會以內聯表格顯示（類似），表格前後沒有換行符號。
table-row-group	#此元素會作為一個或多個行的分組來顯示（類似
table-header-group	#此元素會作為一個或多個行的分組來顯示（類似
table-footer-group	#此元素會作為一個或多個行的分組來顯示（類似
table-row	#此元素會顯示為一個表格行（類似
table-column-group	#此元素會作為一個或多個欄位的分組來顯示（類似
table-column	#此元素會顯示為一個單元格列（類似）
table-cell	此元素會顯示為一個表格單元格（類似	和	）
table-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;//改变块级元素
      }

登入後複製