卡卡網(wǎng)

在前面文章我們介紹了可以通過(guò)使用visibility隱藏元素，本文將繼續(xù)介紹另一種CSS隱藏元素的方法：使用display。

實(shí)例

demodownload

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠標(biāo)移到任何一個(gè)盒子上隱藏盒子two，<br>使用 <b>display: none;</b>。</p>

CSS

/* hide element */
.hide:hover .hide-item,
.hide:focus .hide-item {
  display: none;
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

代碼解釋

display可能是最常用的元素隱藏方法。值none有效地刪除了元素，就好像它從未存在于 DOM 中一樣。

然而，在大多數(shù)情況下，它可能是最糟糕的 CSS 屬性。它不能被動(dòng)畫(huà)化并且會(huì)觸發(fā)頁(yè)面布局，除非使用position: absolute把元素移出文檔流或采用新的contain屬性。

display也是重載的，帶有block，inline，table，flexbox，grid等選項(xiàng)。使用display: none;之后重置回正確的值可能會(huì)出現(xiàn)問(wèn)題。

相關(guān)文章

• CSS隱藏元素的10種方法之：縮小尺寸
• CSS隱藏元素的10種方法之：使用::after偽元素
• CSS隱藏元素的10種方法之：使用position屬性
• CSS隱藏元素的10種方法之：使用display
• CSS隱藏元素的10種方法之：使用visibility
• CSS隱藏元素的10種方法之：使用clip-path
• CSS隱藏元素的10種方法之：使用transform
• CSS隱藏元素的10種方法之：color Alpha 透明度
• CSS隱藏元素的10種方法之：opacity和filter: opacity()

CSS display 屬性

CSS 中的 display 屬性定義了組件（div、超鏈接、標(biāo)題等）將如何放置在網(wǎng)頁(yè)上。顧名思義，此屬性用于定義網(wǎng)頁(yè)不同部分的顯示。

句法：

display: value;

屬性值

相關(guān)文章

• CSS Grid 和 CSS Flexbox 的區(qū)別
• CSS+JS實(shí)現(xiàn)的顏色漸變可拖動(dòng)滑塊
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫(huà)
• 三種在CSS中排除(不選擇)第一個(gè)子標(biāo)簽的方法
• [實(shí)例]純 CSS SVG 畫(huà)圓/圓環(huán)/圓弧動(dòng)畫(huà)
• [示例]如何使用CSS將文本環(huán)繞在圖像周?chē)?/a>
• [3示例]如何用CSS實(shí)現(xiàn)文本環(huán)繞圖像
• 純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表
• CSS如何創(chuàng)建淡入背景動(dòng)畫(huà)
• 如何為圖像、按鈕和文本在懸停時(shí)添加淡入過(guò)渡效果

標(biāo)簽: css  CSS隱藏元素  display