前端小伙伴们，在使用css的display的属性的时候是不是经常会迷惑怎么使用，今天就来详细讲解下。

CSS 的 display 属性用于定义元素应如何显示在页面上。它控制元素的布局和行为，是前端开发中非常重要的一个属性。以下是 display 属性的详细用法：

常见的 display 值

1. block
2. 将元素显示为块级元素。
3. 每个块级元素都会独占一行，宽度默认为父容器的 100%。
4. div {
   display: block;
   }
5. inline
6. 将元素显示为行内元素。
7. 元素不会独占一行，相邻的行内元素会在同一行显示。
8. span {
   display: inline;
   }
9. inline-block
10. 结合了块级元素和行内元素的特性。
11. 元素不会独占一行，但可以设置宽高。
12. div {
    display: inline-block;
    }
13. flex
14. 将元素设置为弹性盒子容器，子元素可以灵活排列。
15. .container {
    display: flex;
    }
16. grid
17. 将元素设置为网格容器，子元素可以按网格布局排列。
18. .container {
    display: grid;
    }
19. none
20. 隐藏元素，不占据任何空间。
21. .hidden {
    display: none;
    }
22. table, table-row, table-cell
23. 分别将元素设置为表格、表格行和表格单元格。
24. table {
    display: table;
    }
    tr {
    display: table-row;
    }
    td {
    display: table-cell;
    }
25. list-item
26. 将元素设置为列表项，通常与
27. 标签一起使用。
28. li {
    display: list-item;
    }
29. inline-flex
30. 结合了 inline 和 flex 的特性。
31. .container {
    display: inline-flex;
    }
32. inline-grid
33. 结合了 inline 和 grid 的特性。
34. .container {
    display: inline-grid;
    }

示例代码

    
    
    
    


    
Block
    Inline Inline
    
Inline Block
 
Inline Block
    

        
Flex Item 1
        
Flex Item 2
        
Flex Item 3
    
    

        
Grid Item 1
        
Grid Item 2
        
Grid Item 3
    
    
This paragraph is hidden.

总结

display 属性是 CSS 中非常强大的工具，通过改变元素的显示方式，可以实现各种复杂的布局效果。理解并熟练运用 display 属性，对于前端开发来说是非常重要的。question_type_trigger