在页面上隐藏或显示特定元素经常会用到css的display属性。在这篇文章中，我们将重点介绍如何使用css的display属性实现div元素的隐藏和显示。
一、CSS的display属性
CSS的display属性有很多的取值，其中常用的值有以下几种：
- none：隐藏元素并释放该元素所占用的空间。
- block：将元素显示为块级元素。
- inline-block：将元素显示为内联块级元素。
- inline：将元素显示为内联元素。
- table：将元素显示为表格元素。
- table-row：将元素显示为表格行元素。
- table-cell：将元素显示为表格单元格元素。
二、使用display属性隐藏和显示div元素
- 隐藏div元素
使用display属性将div元素隐藏并释放该元素所占用的空间：
立即学习“前端免费学习笔记（深入）”；
div {
display: none;
}- 显示div元素
使用display属性将div元素显示为块级元素：
div {
display: block;
}使用display属性将div元素显示为内联块级元素：
div {
display: inline-block;
}使用display属性将div元素显示为内联元素：
div {
display: inline;
}使用display属性将div元素显示为表格元素：
div {
display: table;
}使用display属性将div元素显示为表格行元素：
div {
display: table-row;
}使用display属性将div元素显示为表格单元格元素：
div {
display: table-cell;
}三、使用JavaScript控制div元素的隐藏和显示
如果想要在用户点击某个按钮时控制div元素的隐藏和显示，可以使用JavaScript实现。
显示/隐藏div元素
在例子中，当用户点击按钮时，通过JavaScript获取到id为myDiv的div元素，并判断该元素的display样式属性是否为none，如果是，则将其设置为block，否则将其设置为none。这就实现了div元素的隐藏和显示。
总结
通过这篇文章的介绍，我们可以发现，CSS的display属性是用来控制页面上元素的显示隐藏状态的一个非常重要的属性。无论是通过CSS直接控制元素的状态，还是通过JavaScript实现交互功能，掌握display属性的使用方法都是非常有必要的。
