卡卡网

在前面文章我们介绍了可以通过使用visibility隐藏元素，本文将继续介绍另一种CSS隐藏元素的方法：使用display。

实例

demodownload

HTML

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

<p>鼠标移到任何一个盒子上隐藏盒子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 中一样。

然而，在大多数情况下，它可能是最糟糕的 CSS 属性。它不能被动画化并且会触发页面布局，除非使用position: absolute把元素移出文档流或采用新的contain属性。

display也是重载的，带有block，inline，table，flexbox，grid等选项。使用display: none;之后重置回正确的值可能会出现问题。

相关文章

• 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、超链接、标题等）将如何放置在网页上。顾名思义，此属性用于定义网页不同部分的显示。

句法：

display: value;

属性值

相关文章

• CSS Grid 和 CSS Flexbox 的区别
• CSS+JS实现的颜色渐变可拖动滑块
• 详细介绍CSS+SVG创建圆圈/圆环动画
• 三种在CSS中排除(不选择)第一个子标签的方法
• [实例]纯 CSS SVG 画圆/圆环/圆弧动画
• [示例]如何使用CSS将文本环绕在图像周围
• [3示例]如何用CSS实现文本环绕图像
• 纯CSS实现水平(横向)滚动列表
• CSS如何创建淡入背景动画
• 如何为图像、按钮和文本在悬停时添加淡入过渡效果

标签: css  CSS隐藏元素  display