css中的div显示隐藏div
DIV是HTML中最常用的元素之一，它可以用来创建网页中的各种布局和容器。而在CSS中，使用DIV来显示或隐藏其他DIV也是一种有效的技术。本文将介绍如何使用CSS来实现DIV的显示和隐藏。
显示DIV元素
要将一个DIV元素显示出来，可以使用CSS属性display来控制其显示方式。display属性有四个常用的取值类型：
- block：将元素显示为块级元素。
- inline-block：将元素显示为行内块元素（类似于行内元素，但具有块级元素的特征）。
- inline：将元素显示为行内元素（比如文本）。
- none：将元素隐藏，并在页面中不占任何空间。
例如，下面的CSS样式将一个ID为“demo”的DIV元素显示为块级元素：
立即学习“前端免费学习笔记（深入）”；
demo {
display: block;
}
当然，你也可以将其显示为行内块元素或者行内元素，只需要将display属性的取值类型改为“inline-block”或“inline”。
隐藏DIV元素
要隐藏一个DIV元素，最常用的方法是样式display属性的取值类型设置为“none”，如下所示：
demo {
display: none;
}
这个方法可以使目标DIV元素彻底消失，即使你用JavaScript或者其他方式获取其值，也无法获得任何内容。如果你将一个DOM元素的display设置为“none”，那么在页面上它将不会显示——即使你设置了高度和宽度，它也不会出现。
当然，你也可以使用其他方法来隐藏DIV元素，比如使用visibility属性。visibility属性的取值类型包括：
- visible：元素可见。
- hidden：元素不可见，但是在页面中占用位置。
- collapse：用于表格，元素会被折叠。
例如，下面的CSS样式将一个ID为“demo”的DIV元素设置为不可见：
demo {
visibility: hidden;
}
这时候，这个DIV元素将不可见，但是在页面上仍然占用位置，当你用JavaScript或其他方式访问其属性时，它也仍然可见。
使用JavaScript来控制DIV元素的显示和隐藏
在某些情况下，你可能需要使用JavaScript来控制DIV元素的显示和隐藏。这时候，我们可以使用DOM API提供的style属性来修改元素的CSS样式。例如，下面的JavaScript代码将一个ID为“demo”的DIV元素显示出来：
document.getElementById("demo").style.display = "block";
同样的，我们也可以将其隐藏：
document.getElementById("demo").style.display = "none";
需要注意的是，style属性只能访问内联样式，而无法访问外部样式表和嵌入式样式表。如果你使用外部样式表控制元素的样式，那么你就需要使用其他方法来修改样式表，比如通过DOM API操作link元素来实现。
总结
CSS中使用DIV元素来显示或隐藏其他元素是一种非常实用的技术，它可以用于创建动态网页效果、隐藏广告和内容、使用JavaScript控制元素状态等。需要注意的是，display属性和visibility属性的取值类型有很大的区别，应该根据具体实现的效果来选择使用。
在使用JavaScript控制元素的样式时，应该注意浏览器的兼容性问题，以便更好地支持各种平台和设备。同时，建议在尽可能的情况下使用CSS来控制元素的样式，以提高代码的可维护性和性能。
