在CSS中，`display`属性是一个核心的布局属性，它定义了元素的显示类型，即如何处理元素盒子（box）的布局。不同的`display`属性值决定了元素是块级元素、内联元素还是其他布局模式。以下是`display`属性的一些常见值，以及它们对元素布局的影响。
1. `block`
当`display`属性设置为`block`时，元素将表现为块级元素。它会独占一行，并扩展到包含内容的最大宽度。换行符会在该元素前后创建。常见的块级元素包括`
`、`
`等。
2. `inline`
`inline`值使得元素表现为内联元素。内联元素不会独占一行，它们允许其他元素并排在同一行。内联元素的宽度仅足够包含其内容。常见的内联元素有``、``、``等。
3. `inline-block`
`inline-block`是内联和块级显示的混合体。它允许元素具有块级元素的宽度、高度属性设置，同时保持内联元素的同行显示特性。
4. `flex`
`flex`布局是一种现代布局模式，可以非常灵活地对容器内元素进行排列和对齐。当`display`设置为`flex`时，其直接子元素将成为弹性项目（flex items），可以使用`flex-grow`、`flex-shrink`和`flex-basis`等属性进行布局控制。
5. `grid`
`grid`布局是另一种现代布局技术，它允许我们创建二维网格布局。将`display`属性设置为`grid`的元素成为网格容器（grid container），其直接子元素成为网格项（grid items），可以通过`grid-template-columns`和`grid-template-rows`等属性来定义网格的行列。
6. `none`
`none`值会使得元素不显示，且不占用布局空间。这通常用于隐藏元素，但仍然可以通过JavaScript或CSS对其进行操作。
7. `table`
`table`系列值（包括`table-row`、`table-cell`等）允许使用CSS创建类似表格的布局。这些值不是用来表示HTML表格元素，而是用来创建基于CSS的表格布局。
8. `list-item`
`list-item`值使元素表现为列表项，通常结合`list-style-type`和其他列表样式属性一起使用。
9. `run-in`
`run-in`值较为复杂，它取决于上下文，可能导致元素表现得像`inline`或`block`元素。不过，这个值在浏览器中的支持并不一致，通常不推荐使用。
了解这些`display`属性值对于前端开发人员来说至关重要，因为它们是构建网页布局的基础。每个值都有其特定的用途和浏览器支持情况，因此在实际开发中，选择合适的`display`值对于实现预期的布局至关重要。