文章目录

一、display 属性概述display 的常见取值其他常见值

二、常见的 display 值及其作用1. block：块级元素示例：

2. inline：行内元素示例：

3. inline-block：行内块元素示例：

4. none：隐藏元素示例：

5. flex：弹性布局示例：

6. grid：网格布局示例：

7. list-item：列表项元素示例：

三、常见的面试考点1. `display` 属性的默认值是什么？2. 如何改变元素的显示类型？3. `display: none` 和 `visibility: hidden` 的区别？

在 Web 开发中，display 是一个非常常见且重要的 CSS 属性。它决定了元素如何在页面上显示和排列。通过合理使用 display 属性，可以实现各种布局效果，从简单的行内元素到复杂的网格布局。本文将详细介绍 display 属性的常用值及其作用，帮助大家更好地理解和应用这个属性。

一、display 属性概述

display 属性用于设置一个元素的显示行为。根据不同的值，元素的显示方式可以大不相同。例如，某些元素可能表现为块级元素，而其他元素则可能表现为行内元素或其他特殊布局形式。掌握 display 属性的不同取值，对于完成各种布局设计至关重要。

display 的常见取值

block：块级元素inline：行内元素inline-block：行内块元素none：隐藏元素flex：弹性盒布局grid：网格布局list-item：列表项元素

其他常见值

run-in：适用于某些特殊情况的元素，通常与文档流结合使用。contents：该值允许元素的子元素表现为它们的父元素的直系后代，但父元素本身不占据空间。

二、常见的 display 值及其作用

1. block：块级元素

block 是 display 属性最常见的值之一，表示元素会作为块级元素显示。块级元素占据一整行，其宽度默认为父容器的宽度，可以设置宽高，并且元素之间会有换行。

示例：

块级元素的常见例子包括