3. `display: inline-block`:
   - 元素既具有内联元素的特性，又具有块级元素的特性。它占据内容所需的宽度，但可以在同一行内包含其他内联元素，并支持设置宽度和高度等属性。

4. `display: none`:
   - 元素不会在页面中显示，完全被隐藏。它不占据页面布局空间，所以页面上的其他元素会像它不存在一样排列。

5. `display: flex`:
   - 元素被渲染为一个弹性容器，它的子元素成为弹性项。这允许使用弹性布局来进行灵活的排列和对齐子元素。常用于创建响应式布局。

6. `display: grid`:
   - 元素被渲染为一个网格容器，可以通过网格布局定义行和列来排列子元素。这提供了更复杂的布局控制和对齐选项。

7. `display: table`、`display: table-row`、`display: table-cell` 等:
   - 这些值用于模拟HTML表格布局，将元素渲染为表格、表格行和表格单元格。虽然不推荐使用表格布局，但它们仍然可以在某些情况下派上用场。

`display` 属性允许开发者灵活地控制元素的布局和显示方式，根据设计需求来选择不同的值，以实现所需的页面结构和外观。这些值还可以与其他CSS属性一起使用，以进一步控制元素的外观和行为。

当涉及到CSS的`display`属性时，示例是最好的方式来理解其作用。以下是一些常见的示例：

1. `display: block` 示例：

  这是一个块级元素

2. `display: inline` 示例：

这是
内联
元素

3. `display: inline-block` 示例：

4. `display: none` 示例：

这个元素不会显示

5. `display: flex` 示例：

 

1

 

2

 

3

6. `display: grid` 示例：

 

1

 

2

 

3

这些示例演示了不同的`display`属性值如何影响元素的布局和显示方式。你可以通过修改属性值和样式来进一步探索这些属性在页面布局中的不同用途。

转载：感谢您对董哥博客网站平台的认可，以及对我们作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源董哥博客”。