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 属性来控制。通过熟练掌握这两种方式，我们能够更加灵活地控制各种元素的显示和隐藏，从而实现更好的网页展示效果。
以上就是css怎么实现div隐藏与显示的详细内容。