div css 顯示隱藏

div css 顯示隱藏

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

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

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

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

<style>
.hidden{
  display: none;
}
</style>

2. display: block;
   display: block;表示將元素以區塊級元素的形式顯示。預設情況下，div元素就是區塊級元素，在頁面中會以獨佔一行的形式顯示。

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

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

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

3. display: inline;
   display: inline;表示將元素以行內元素的形式顯示。預設情況下，span元素就是行內元素，在頁面中會和其他行內元素或文字在同一行顯示。

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

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

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

4. 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中文網其他相關文章！