一、display的基本概念
display是CSS中一个很重要的属性，它定义一个元素的显示方式。默认情况下，所有元素都是显示的。但是，我们可以通过设置display属性的值来改变元素的显示方式。
display有多个取值，每个值代表不同的显示方式。其中，block、inline和none是最常用的，分别代表块级元素、内联元素和隐藏元素。
/* 块级元素 */ display: block; /* 内联元素 */ display: inline; /* 隐藏元素 */ display: none;
二、块级元素的显示方式
块级元素会将自己尽可能撑满父容器的宽度，从而独占一行显示。块级元素可以设置宽度、高度、内边距和外边距等属性，并且默认情况下总是在前后都换行。
下面是一个块级元素的示例：
<div style="display: block; width: 200px; height: 100px; background-color: red; margin: 10px;"></div>
三、内联元素的显示方式
内联元素会在一行内显示，它们的尺寸由元素本身的内容决定。内联元素不可以设置宽度、高度、内边距和外边距等属性，并且默认情况下前后不换行。
下面是一个内联元素的示例：
<span style="display: inline; background-color: yellow; padding: 5px;">这是一个内联元素</span>这是一个内联元素
四、display属性应用实例：下拉菜单
下拉菜单是Web开发中一个非常常见的组件。我们可以使用display属性实现一个简单的下拉菜单。
<button onclick="myFunction()">下拉菜单</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
<script>
function myFunction() {
var dropdown = document.getElementById("myDropdown");
if (dropdown.style.display === "none") {
dropdown.style.display = "block";
} else {
dropdown.style.display = "none";
}
}
</script>
五、display的注意事项
1、display属性的修改会影响元素的布局，从而可能影响到其他元素的位置和大小。
2、display属性不是动画或渐变效果的替代方案，更多的情况下应该使用CSS动画。
3、对于多个元素需要显示/隐藏的情况，我们可以将它们放入一个父元素中，并针对父元素设置display属性。
4、如果需要在JavaScript代码中修改display属性，我们可以使用元素的style.display属性。例如：
var element = document.getElementById("myElement");
// 隐藏元素
element.style.display = "none";
// 显示元素
element.style.display = "block";
六、小结
display属性是CSS中一个非常重要的属性，它可以改变元素的显示方式，从而实现不同的布局效果。它有多个取值，其中block、inline和none使用最为广泛。
