CSS的 display 属性用于定义元素的显示方式。它控制元素在文档流中的布局类型，并决定元素在页面中如何呈现。
下面土嘎嘎小编分享一些常见的 display 属性取值及其含义：
1、block:元素将以块级元素的形式显示，独占一行，默认情况下会有换行符，可以设置宽度、高度和外边距等属性。
2、inline:元素将以内联元素的形式显示，不独占一行，只尽可能占据所需的空间，默认情况下不可设置宽度、高度和外边距等属性。
3、inline-block:元素将以内联块级元素的形式显示，与 inline 类似，但可以设置宽度、高度和外边距等属性。
4、none:元素将完全不显示，并且不在文档流中占据任何空间。
5、flex:元素将成为弹性容器，用于进行灵活的布局，可以通过 flex-direction 、 justify-content 等属性来控制子元素的排列方式。
6、grid:元素将成为网格容器，用于进行网格布局，可以通过 grid-template-rows 、 grid-template-columns 等属性来定义网格行列。
7、table:元素将表现为表格，常用于创建复杂的表格布局，可以使用 table-row 、 table-cell 等属性来定义表格行和单元格。
这些只是 display 属性的一些常见取值，还有其他更多取值可用于实现不同的布局需求。通过调整 display 属性，你可以改变元素在页面中的布局和显示方式，从而实现各种不同的设计效果。
当涉及到更多的示例代码时，下面土嘎嘎小编分享几个使用不同 display 属性的简单示例：
1、block 示例：
〓〓css代码如下：〓〓
.block-example {
display: block;
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
〓〓html代码如下：〓〓
<div class="block-example"></div>
<div class="block-example"></div>
2、inline 示例：
〓〓css代码如下：〓〓
.inline-example {
display: inline;
border: 1px solid blue;
padding: 5px;
background-color: yellow;
}
〓〓html代码如下：〓〓
<span class="inline-example">Inline element 1</span>
<span class="inline-example">Inline element 2</span>
3、inline-block 示例：
〓〓css代码如下：〓〓
.inline-block-example {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
margin-right: 10px;
}
〓〓html代码如下：〓〓
<div class="inline-block-example"></div>
<div class="inline-block-example"></div>
<div class="inline-block-example"></div>
4、none 示例：
〓〓css代码如下：〓〓
.none-example {
display: none;
}
〓〓html代码如下：〓〓
<p>This is a visible paragraph.</p>
<p class="none-example">This paragraph will not be displayed.</p>
这些示例展示了一些常见的 display 属性取值的应用场景。你可以根据需求对它们进行修改和扩展，深入学习更多相关属性并结合其他CSS样式来实现更复杂的布局。