css中标签隐身与初显现

在前端开发中，CSS是非常重要的一部分。它可以控制网页的样式和布局。其中一种常见的技巧是将某些元素设为初始不可见，然后在某些条件触发时再让它们可见。这种效果可以使用CSS中的标签隐身与初显现实现。

.hidden {
  display: none;
}

.visible {
  display: block;
} 

在上面的代码中，我们定义了两个类：.hidden和.visible。.hidden类将元素设为不可见，.visible类将元素设为可见。

我们可以将这些类应用于不同的元素以达到我们想要的效果。例如，当我们需要展示一个下拉菜单时，可以将其设为初始不可见，并在用户点击某个元素时让其可见：

.dropdown-menu {
  display: none;
}

.show {
  display: block;
} 

这样一来，我们就可以通过给某些元素添加.show类来让下拉菜单显示出来：

<button onclick="document.querySelector('.dropdown-menu').classList.add('show')">Show Dropdown Menu</button>

<ul class="dropdown-menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul> 

在上面的代码中，我们给按钮添加了一个onclick事件，当用户点击该按钮时，会给下拉菜单添加.show类，从而让它显示出来。

除了使用display属性来实现标签隐身与初显现，我们还可以使用visibility属性。这个属性与display类似，也可以控制元素的可见性。但不同的是，当visibility被设置为hidden时，元素仍然占用着页面布局，只是不再可见了：

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
} 

在使用visibility属性时，需要注意元素占用的空间可能会影响页面布局，需要根据实际需求来决定使用哪种属性。