一、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>

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