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	此元素會以區塊級表格顯示（類似f5d188ed2c074f8b944552db028f98a1），表格前後有換行符號。
inline-table	#此元素會以內聯表格顯示（類似79a829d2b9474f375f6632d3711ae046）。
table-header-group	#此元素會作為一個或多個行的分組來顯示（類似ae20bdd317918ca68efdc799512a9b39）。
table-footer-group	#此元素會作為一個或多個行的分組來顯示（類似06669983c3badb677f993a8c29d18845）。
table-row	#此元素會顯示為一個表格行（類似a34de1251f0d9fe1e645927f19a896e8 ）。
table-column-group	#此元素會作為一個或多個欄位的分組來顯示（類似879b49175114808d868f5fe5e24c4e0b）。
table-column	#此元素會顯示為一個單元格列（類似eb20fd1e972aff2c15001e939b1cd51a 和b4d429308760b6c2d20d6300079ed38e）
table-caption	此元素會以表格標題顯示（類似63bd76834ec05ac1f4c0ebbeaafb0994）
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元素居中佈局的簡單方法

以上是CSS的元素的隱藏與顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！