一、使用display属性实现显示隐藏div
在css中，最常用于实现显示隐藏div切换的方式是使用display属性。display可以控制元素的可见性和可表现性，我们所需要的隐藏div效果就是通过该属性来实现的。
display的常用值有：block、inline、inline-block、none等，其中none是我们隐藏div的关键。
css代码如下：
.hide { display: none;}.show { display: block;}
通过设置.hide元素的display属性为none来实现隐藏，.show元素的display属性为block来实现显示。
为了控制div的显示与隐藏，我们可以使用javascript或jquery来访问这些css类，并在必要时添加或删除它们。
举个例子：
html代码：
<button id="hidden_btn">点击隐藏</button><div id="hidden_div" class="hide">隐藏文本</div>
js代码：
$(document).ready(function() { $(#hidden_btn).click(function() { $(#hidden_div).toggleclass(hide); $(#hidden_div).toggleclass(show); });});
这里使用jquery的toggleclass()方法来切换class，当按钮被点击时，该方法将会从编辑器中删除.hide类，并添加.show类，从而将div从隐藏状态切换到显示状态。
二、使用visibility属性实现显示隐藏div
visibility属性与display属性一样可以用来控制元素的可见性，其常用值有：visible、hidden、collapse。
当我们使用visibility属性隐藏元素时，元素仍然占用html文档中的空间，只是在视觉上变为透明或不可见，但是它的大小和位置仍然存在于页面上。
css代码如下：
.hide { visibility: hidden;}.show { visibility: visible;}
css代码的示例与使用display属性的展示示例类似，这里只说一下js代码：
js代码：
$(document).ready(function() { $(#hidden_btn).click(function() { $(#hidden_div).toggleclass(hide); $(#hidden_div).toggleclass(show); });});
同样是使用toggleclass()方法来切换类。
三、使用opacity属性实现显示隐藏div
opacity属性用于设置元素的透明度，其值的取值范围为0.0到1.0，其中0.0指元素完全透明，1.0指元素完全不透明。
css代码如下：
.hide { opacity: 0; height: 0; overflow: hidden;}.show { opacity: 1; height: auto;}
这里除了使用opacity属性之外，我们还定义了height和overflow属性，以解决隐藏div时留下空间的问题。
当hide类被应用时，div的高度将被设置为0，且内容将被隐藏。为了其在切换后能够自动调整高度，我们在.show类中将高度设置为auto，这样在切换时div就会自动调整变为可见的。
再来看一下javascript代码：
js代码：
$(document).ready(function() { $(#hidden_btn).click(function() { $(#hidden_div).toggleclass(hide); $(#hidden_div).toggleclass(show); });});
同样使用toggleclass()方法。
四、总结
以上就是css中实现显示隐藏div的三种主要方法，它们分别是使用display属性、visibility属性、以及opacity属性。在实际应用中，我们需要根据具体的需求来选择使用哪种方式。
除此之外，常常被使用的是将visibility与display相结合的值——visibility:hidden;display:none，该值是让元素不可见且不占据屏幕空间，这样做比使用display:none好处在于，js代码调用元素时可以获取该元素的位置信息。但是，当visibility:hidden;display:none被使用时，该元素不会再被响应点击事件，这可能会影响你的应用。所以，在使用时需要根据具体情况选择。
总之，需要掌握并善于运用css属性，才能够让开发出的网页在视觉效果方面更加优秀，提高用户的体验，为接下来的js开发奠定扎实的基础。
以上就是在css中如何实现显示隐藏div的切换的详细内容。