顺风 CSS 显示

此类在顺风 CSS 中接受多个值。所有属性都以类的形式涵盖。它是 CSS 显示属性的替代方案。此类用于定义组件（div、超链接、标题等）将如何放置在网页上。顾名思义，此属性用于定义网页不同部分的显示。

显示类：

table：用于将所有元素的行为设置为。

table-caption：用于将所有元素的行为设置为

。

table-column-group：用于将所有元素的行为设置为。

table-footer-group：用于将所有元素的行为设置为

table-header-group：用于将所有元素的行为设置为

。

table-row-group：用于将所有元素的行为设置为。

table-row：用于将所有元素的行为设置为

。

flow-root：用于设置默认值。

grid：用于将元素显示为块级网格容器。

inline-grid：用于将元素显示为内联级网格容器。

contents：用于使容器消失。

hidden：用于移除元素。

block：用于将元素显示为块级元素。此类用作div的默认属性。此类将 div 一个接一个地垂直放置。 div的高度和宽度可以通过block类来改变，如果没有提到宽度，那么block类下的div会占据容器的宽度。

句法：

...

示例 1：

 
     
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS block Class 
    
        1
        2
        3

 
     
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS inline-block Class 
    
        1
        2
        3

 
     
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS inline Class 
    
        1
        2
        3

 
 
      
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS flex Class 
    
        1
        2
        3

输出：

inline-block：用于将元素显示为内联级块容器。此功能使用上面提到的两个属性，块和内联。所以，这个类对齐div内联，但不同的是它可以编辑块的高度和宽度。基本上，这将以块和内联方式对齐 div。

句法：

...

示例 2：

HTML

 
     
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS inline-block Class 
    
        1
        2
        3

输出：

inline：用于将元素显示为内联元素。此类是锚标记的默认属性。这用于将 div 内联，即以水平方式放置。内联显示属性忽略用户设置的高度和宽度。

句法：

...

示例 3：

 
     
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS inline Class 
    
        1
        2
        3

输出：

flex： flex类响应速度快且对移动设备友好。定位子元素和主容器很容易。边距不会随内容边距折叠。无需编辑 HTML 部分即可轻松更改任何元素的顺序。

句法：

...

示例 4：

 
 
      
     
 
  
 

    
        GeeksforGeeks
     
    Tailwind CSS flex Class 
    
        1
        2
        3

输出：

。
**table-cell：**用于将所有元素的行为设置为
。 table-column：用于将所有元素的行为设置为