在网页设计中，隐藏和显示元素是非常常见的需求。为了实现元素的隐藏和显示，我们通常会使用 CSS 的 display 属性。本文将介绍 CSS 中常用的隐藏和显示方法。
一、CSS 中 display 属性
display 属性是 CSS 中最常用的属性之一，它可以控制元素的显示或隐藏，同时也可以改变元素的表现形式。display 属性有很多取值，这里我们仅介绍其中几个常用的取值。
- display: none
display:none 是最常用的隐藏元素的方法，它将元素完全从文档流中删除，不占据任何空间。即使在浏览器中查看元素的 HTML 代码，也看不到被隐藏的元素。使用 display:none 的优点是，可以在不改变布局的情况下隐藏元素，并且元素不占用空间。
例如，我们可以使用以下 CSS 代码来隐藏一个元素：
div {
display: none;
}- display: block
display:block 是最常用来显示元素的方法。block 元素会在新的一行中开始，并且会占据整个父元素的宽度。它可以设置宽高并默认情况下可以容纳内联元素和文本节点。
例如，以下 CSS 代码将 div 元素设置为 block 元素：
div {
display: block;
}- display: inline
display:inline 是让元素内联显示，以相邻元素的形式出现。它不会在文本前后另起一行，而是与其他元素共享一行。它可以设置元素的宽度和高度，但是不会自动为其换行。
例如，我们可以使用以下 CSS 代码将 span 元素设置为 inline 元素：
span {
display: inline;
}- display: inline-block
display:inline-block 是让元素既具有 inline 的部分特性（元素不会另起一行），又具有 block 的一些特性（可以设置宽高），常用来实现一些布局效果，比如实现图文混排的效果。
例如，我们可以使用以下 CSS 代码将 div 元素设置为 inline-block 元素：
div {
display: inline-block;
}二、CSS 中 visibility 属性
除了 display 属性之外，还有一个常用的属性可以实现元素的显示和隐藏，那就是 visibility 属性。visibility 属性用于控制元素的可见性，可设置为 visible（默认值，元素可见）和 hidden（元素隐藏）两种取值。
- visibility: visible
visibility: visible 是默认值，也就是让元素可见的取值。这和 display:block 或者 display:inline 的情况很像。但是，visibility: visible 的元素在文档中的位置保持不变，不像 display:block 或者 display:inline 的元素那样会受到 CSS 布局的影响。即使元素被隐藏了，仍然可以使用 JavaScript 或其他技术来获取该元素的位置和大小。
例如，以下 CSS 代码将 div 元素设置为可见状态：
div {
visibility: visible;
}- visibility: hidden
visibility: hidden 是将元素隐藏的取值。这和 display:none 的效果很像，但是它不会从文档流中移除元素，而是保留元素的占位空间。因此，如果元素被隐藏，其他元素会占用该元素的位置，并且该元素触发的事件和动画依然有效。
例如，以下 CSS 代码将 div 元素设置为不可见状态：
div {
visibility: hidden;
}三、CSS 中 opacity 属性
除了使用 display 和 visibility 属性进行元素的隐藏和显示之外，还可以使用 opacity 属性来调整元素的透明度。
- opacity: 1 （不透明）
opacity: 1 是元素的默认取值，它表示元素完全不透明，即不会透过该元素看到任何后面的内容。
例如，以下 CSS 代码设置了一个不透明的 div 元素：
div {
opacity: 1;
}- opacity: 0 （完全透明）
opacity: 0 表示元素完全透明，即背景完全透过该元素显示出来。在实际中，opacity: 0 通常用于隐藏元素，并且可以保留元素的占位空间。
例如，以下 CSS 代码设置了一个完全透明的 div 元素：
div {
opacity: 0;
}- opacity: 0.5 （半透明）
opacity: 0.5 表示元素半透明，即背景可以透过该元素显示出来，但是仍然可以看到元素的内容。
例如，以下 CSS 代码设置了一个半透明的 div 元素：
div {
opacity: 0.5;
}总结
本文介绍了 CSS 中常用的隐藏和显示方法，包括 display 和 visibility 属性，以及 opacity 属性。在实际开发中，我们可以根据具体需求来选择不同的方法来实现元素的隐藏和显示。希望本文能够对您有所帮助。