本文目錄導(dǎo)讀：

1. 使用 display 屬性
2. 使用 visibility 屬性
3. 使用 CSS 動畫和過渡

CSS 控制 Div 的顯示與隱藏

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要控制某些元素的顯示與隱藏，如 div，這可以通過 CSS 來實(shí)現(xiàn)，本文將介紹幾種常用的 CSS 方法來控制 div 的顯示與隱藏。

使用 display 屬性

通過 CSS 的 display 屬性，我們可以控制 div 的顯示與隱藏，當(dāng)我們將 display 屬性設(shè)置為 "none" 時(shí)，div 將被隱藏；當(dāng)設(shè)置為 "block"、"inline" 或其他有效值時(shí)，div 將被顯示。

示例：

/* 隱藏 div */
.hidden-div {
  display: none;
}
/* 顯示 div */
.visible-div {
  display: block; /* 或 inline、inline-block 等 */
}

使用 visibility 屬性

除了 display 屬性，我們還可以使用 visibility 屬性來控制 div 的可見性，與 display 不同，當(dāng)我們將 visibility 設(shè)置為 "hidden" 時(shí)，雖然 div 不可見，但仍然占據(jù)頁面空間；而設(shè)置為 "visible" 時(shí)，div 可見且占據(jù)空間。

示例：

/* 隱藏 div 但保留空間 */
.hidden-but-space {
  visibility: hidden;
}
/* 顯示 div */
.visible {
  visibility: visible; /* 默認(rèn)屬性 */
}

使用 CSS 動畫和過渡

我們還可以利用 CSS 的動畫和過渡效果來實(shí)現(xiàn) div 的動態(tài)顯示與隱藏，使用 opacity 和 transition 屬性，這種方法可以讓 div 的顯示與隱藏更加平滑。

示例：

/* 使用過渡效果隱藏和顯示 div */
.div-transition {
  opacity: 1; /* 默認(rèn)完全可見 */
  transition: opacity 0.5s ease; /* 設(shè)置過渡效果 */
}
.hidden-transition {
  opacity: 0; /* 完全透明，看起來像是隱藏 */
}

通過 JavaScript 動態(tài)控制這些類的添加與移除，可以實(shí)現(xiàn) div 的隱藏與顯示，這些方法可以根據(jù)實(shí)際需求進(jìn)行選擇和使用，以達(dá)到***佳的頁面效果。