首頁  >  文章  >  web前端  >  div css 顯示隱藏

div css 顯示隱藏

PHPz
PHPz原創
2023-05-27 09:47:37751瀏覽

div css 顯示隱藏

CSS可以透過display屬性來控制元素的顯隱,其中常用的有以下幾種方式:

  1. display: none;
    使用display: none;可以隱藏元素,當元素設定了display: none;時,元素不會出現在頁面中,也不會佔用空間。

例如,在下面的程式碼片段中,div元素設定了display: none;,因此不會在頁面中顯示:

<div class="hidden">这是要隐藏的内容</div>

<style>
.hidden{
  display: none;
}
</style>
  1. display: block;
    display: block;表示將元素以區塊級元素的形式顯示。預設情況下,div元素就是區塊級元素,在頁面中會以獨佔一行的形式顯示。

例如,在下面的程式碼片段中,div元素設定了display: block;,將以區塊級元素的形式顯示:

<div class="block">这是块级元素</div>

<style>
.block{
  display: block;
}
</style>
  1. display: inline;
    display: inline;表示將元素以行內元素的形式顯示。預設情況下,span元素就是行內元素,在頁面中會和其他行內元素或文字在同一行顯示。

例如,在下面的程式碼片段中,div元素設定了display: inline;,將以行內元素的形式顯示:

<div class="inline">这是行内元素</div>

<style>
.inline{
  display: inline;
}
</style>
  1. display: inline-block;
    display: inline-block;表示將元素以行內區塊級元素的形式顯示。行內區塊級元素既能像行內元素一樣和其他元素在同一行顯示,又能像區塊級元素一樣設定寬高、內外邊距等屬性。

例如,在下面的程式碼片段中,div元素設定了display: inline-block;,將以行內區塊級元素的形式顯示:

<div class="inline-block">这是行内块级元素</div>

<style>
.inline-block{
  display: inline-block;
}
</style>

使用display屬性可以輕鬆實現元素的顯示和隱藏。需要注意的是,如果將一個元素設為display: none;後,該元素下的所有子元素也會隱藏。因此,在實際應用中,需要根據特定的需求來選擇合適的display屬性。

以上是div css 顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn