div 隐藏与显示 css
DIV 是 HTML 标签中的一个重要的元素，它可以用来展示文本、图片、视频等。在网页设计中，我们经常会遇到需要将某些元素隐藏或显示的情况，这就需要使用 CSS 对 DIV 进行设置。本文将为大家介绍如何使用 CSS 来实现 DIV 的隐藏和显示。
一、CSS display 属性
CSS display 属性可以控制元素在页面中的显示方式。display 有多种取值，常用的有以下几种：
- none：元素不显示，也不占用页面空间；
- block：元素会生成一个块级容器，占用整个变宽，常用于显示文本或图片等块级元素；
- inline：元素不会独占一行，只占据自身的宽度和高度，常用于显示链接、图片等行内元素；
- inline-block：与 inline 相似，但是可以设置宽度和高度；
- flex：弹性布局，可以灵活地分配元素的空间。
我们可以通过设置 CSS 的 display 属性，来实现 DIV 的隐藏和显示效果。
立即学习“前端免费学习笔记（深入）”；
下面以一个实例来说明：
在 HTML 文件中，我们创建一个 DIV 元素：
<div id="myDiv">这里是要隐藏/显示的内容</div>
然后在 CSS 文件中，设置 DIV 的 display 属性：
#myDiv{
display:none; /* 默认隐藏 */
}
当页面加载之后，这个 DIV 元素就会被隐藏起来。此时，我们需要添加一个事件，来实现鼠标点击时的显示效果。
在 JavaScript 中，可以通过设置元素的 style 属性来改变 CSS 的 display 属性，从而实现元素的隐藏和显示。以下是具体操作：
/ 获取元素 /
var myDiv = document.getElementById('myDiv');
/ 当鼠标点击时，显示 DIV /
function showDiv(){
myDiv.style.display = 'block';
}
/ 当鼠标点击时，隐藏 DIV /
function hiddenDiv(){
myDiv.style.display = 'none';
}
这样，当鼠标点击时，DIV 就会以块级元素的形式呈现在页面上。当再次点击时，又会被隐藏起来。
二、CSS visibility 属性
另外一个控制元素隐藏和显示的属性是 visibility。visibility 有两个取值：visible（可见）和 hidden（隐藏）。与 display 不同的是，当 visibility 被设置为 hidden 时，元素虽然被隐藏，但是仍然占据页面的空间。
在 HTML 文件中，我们同样创建一个 DIV 元素：
<div id="myDiv">这里是要隐藏/显示的内容</div>
然后在 CSS 文件中，设置 DIV 的 visibility 属性：
#myDiv{
visibility:hidden; /* 默认隐藏 */
}
当页面加载之后，这个 DIV 元素就会被隐藏起来。这时，我们需要添加一个事件，来实现鼠标点击时的显示效果。
在 JavaScript 中，我们同样可以通过改变元素的 style 属性来改变元素的 visibility 属性。以下是具体代码：
/ 获取元素 /
var myDiv = document.getElementById('myDiv');
/ 当鼠标点击时，显示 DIV /
function showDiv(){
myDiv.style.visibility = 'visible';
}
/ 当鼠标点击时，隐藏 DIV /
function hiddenDiv(){
myDiv.style.visibility = 'hidden';
}
这样，当鼠标点击时，DIV 就会变得可见。再次点击时，又会变得隐藏。
三、总结
在网页设计中，展示和隐藏元素是十分常见的需求。常用的控制元素隐藏和显示的方式主要有两种：一种是通过修改元素的 display 属性来控制，另一种是通过修改元素的 visibility 属性来控制。通过熟练掌握这两种方式，我们能够更加灵活地控制各种元素的显示和隐藏，从而实现更好的网页展示效果。
