在 CSS 中，display 属性用于定义元素的显示类型，可以改变元素的布局和排列方式。这是一种非常重要的属性，我们来看看它的各种取值及其作用。

1. block（块级元素）

块级元素会独占一行，可以设置宽度和高度，占据完整的水平空间。

2. inline（行内元素）

行内元素会在一行内显示，不会独占一行，不可以设置宽度和高度。

3. inline-block（行内块元素）

行内块元素结合了块级元素和行内元素的特性，可以设置宽度和高度，又不会独占一行。

4. none（隐藏元素）

隐藏元素，不会显示在页面上，也不会占据任何空间。

5. flex（弹性布局容器）

将容器设置为弹性布局容器，用于分配子元素的位置和大小。

6. inline-flex（行内弹性布局容器）

将容器设置为行内弹性布局容器，在一行内显示子元素。

7. grid（网格布局容器）

将容器设置为网格布局容器，用于创建基于网格的布局系统。

8. inline-grid（行内网格布局容器）

将容器设置为行内网格布局容器，在一行内显示网格布局。

9. table（表格布局容器）

将元素作为表格布局容器。

10. table-row（表格行布局容器）

将元素作为表格行布局容器。

11. table-cell（表格单元格布局容器）

将元素作为表格单元格布局容器。

12. table-column（表格列布局容器）

将元素作为表格列布局容器。

13. list-item（列表项布局容器）

将元素作为列表项显示，并添加列表标记。

14. run-in（在文本中运行的块级元素）

根据上下文决定元素是内联还是块级，不常用。

15. compact（紧凑块级元素）

紧凑块级元素，类似于 HTML 中的 <dd>，在现代网页设计中很少使用。

需要注意的是，display: run-in; 和 display: compact; 在现代的网页设计中几乎不再使用，也不是所有浏览器都支持这些值。而 display: none; 与 visibility: hidden; 不同，display: none; 完全移除元素，不占据任何空间。

以下是一些使用 display 属性的示例：

/* 设置div为块级元素 */
div {  display: block;}

/* 设置span为行内元素 */
span {  display: inline;}

/* 设置img为行内块元素 */
img {  display: inline-block;}

/* 设置p为隐藏元素 */
p {  display: none;}

总结一下，display 属性是 CSS 中非常重要的一个属性，通过调整元素的显示类型，可以灵活控制元素的布局和排列方式。在实际应用中，我们需要根据具体的布局需求选择合适的 display 值，以达到我们想要的效果。

在继续深入研究 display 属性之前，你可能会有一些疑问：

常见问题：

1. 如何使用 display 属性改变元素的显示类型？

2. display: none; 与 visibility: hidden; 有什么区别？

3. 什么是弹性布局和网格布局？

请留言提出你的问题，让我来解答。

感谢阅读本文，希望对你有所帮助。如果你对本文有任何疑问或想了解更多信息，请在下方评论区留言。同时，欢迎关注我们的博客，点赞和分享本文，感谢你的观看！