Tailwind CSS - 显示



Tailwind CSS Display(显示) 是一种实用程序类,有助于确定元素在文档中的显示方式。此实用程序控制元素的显示类型。

Tailwind CSS Display 类

Tailwind CSS Display(显示) 类列表提供了一种有效的方法来确定元素的显示类型。

CSS 属性
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

Tailwind CSS Display 类的功能

  • block: 它将元素显示为块级元素,从新行开始,并占据整个宽度。
  • inline-block: 将元素显示为内联级块容器。元素本身格式化为内联元素,但您可以应用高度和宽度值
  • inline: 它将元素显示为内联元素。任何高度和宽度属性都不会生效。
  • flex: 它将元素显示为块级 Flex 容器。
  • inline-flex: 它将元素显示为内联级 Flex 容器。
  • table: 它将元素显示为表格。
  • inline-table: 元素显示为内联级表格。
  • table-caption: 使元素的行为类似于 <caption> 元素。
  • table-cell: 使元素的行为类似于 <td> 元素。
  • table-column: 使元素的行为类似于<col>元素。
  • table-column-group: 使元素的行为类似于<column>。
  • table-footer-group: 使元素的行为类似于<tfoot>元素。
  • table-header-group: 使元素的行为类似于<thead>元素。
  • table-row-group: 使元素的行为类似于<tbody>元素。
  • table-row: 使元素的行为类似于<tr>元素。
  • flow-root: 它创建一个具有自身块级格式化上下文的块级元素。
  • grid: 它将元素显示为块级网格容器。
  • inline-grid: 它将元素显示为内联级网格容器。
  • contents: 使容器消失,使子元素成为DOM中上一级元素的子元素。
  • list-item: 使元素的行为类似于<li>元素。
  • hidden: 它使元素不可见并将其从文档流中移除。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 显示类示例

以下示例将说明 Tailwind CSS 的display 类。

示例 1

以下示例演示了内联、块、内联块类的使用。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-2"> <h1 class="text-3xl"> Tailwind CSS Display- Inline, Block, Inline-Block </h1> <h2 class="text-2xl my-2 text-lime-600"> Display - Inline </h2> <li class="inline border-2 rounded p-1 border-blue-700"> Item1 </li> <li class="inline border-2 rounded p-1 border-rose-700"> Item2 </li> <li class="inline border-2 rounded p-1 border-fuchsia-700"> Item3 </li> <h2 class="text-2xl my-2 text-yellow-600"> Display - Block </h2> <li class="block border-2 rounded p-1 border-blue-700"> Item1 </li> <li class="block border-2 rounded p-1 border-rose-700"> Item2 </li> <li class="block border-2 rounded p-1 border-fuchsia-700"> Item3 </li> <h2 class="text-2xl my-2 text-violet-600"> Display - Inline-block </h2> <li class="inline-block border-2 h-12 w-32 rounded p-1 border-blue-700"> Inline-Block 1 </li> <li class="inline-block border-2 h-12 w-32 rounded p-1 border-rose-700"> Inline-Block 2 </li> <li class="inline-block h-12 w-32 border-2 rounded p-1 border-fuchsia-700"> Inline-Block 3 </li> </body> </html>

示例 2

以下示例演示了Flex 和内联 Flex 类的使用。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-2"> <h1 class="text-3xl"> Tailwind CSS Display- Flex, Inline-Flex </h1> <h2 class="text-2xl my-2 text-lime-600"> display: flex </h2> <div class="flex border-2 rounded p-1 border-blue-700 mb-1"> Flex-Block 1 </div> <div class="flex border-2 rounded p-1 border-rose-700 mb-1"> Flex-Block 2 </div> <div class="flex border-2 rounded p-1 border-fuchsia-700"> Flex-Block 3 </div> <h2 class="text-2xl my-2 text-violet-600"> display: inline-flex </h2> <div class="inline-flex border-2 rounded p-1 border-blue-700"> Inline Flex-Block 1 </div> <div class="inline-flex border-2 rounded p-1 border-rose-700"> Inline Flex-Block 2 </div> <div class="inline-flex border-2 rounded p-1 border-fuchsia-700"> Inline Flex-Block 3 </div> </body> </html>

示例 3

以下示例演示了table、table-caption、table-cell、table-column、table-column-group、table-footer-group、table-header-group、table-row-group、table-row 类的使用。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8"> <h2 class="text-3xl text-center mb-2"> Tailwind CSS Display Classes Example </h2> <div class="table w-full border"> <div class="table-caption text-center text-xl font-bold text-orange-400"> Sample Table </div> <div class="table-header-group"> <div class="table-row"> <div class="table-cell text-center p-2 border bg-slate-100"> Header 1 </div> <div class="table-cell text-center p-2 border bg-slate-100"> Header 2 </div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell text-center p-2 border"> Row1-Cell1 </div> <div class="table-cell text-center p-2 border"> Row1-cell2 </div> </div> <div class="table-row"> <div class="table-cell text-center p-2 border"> Row2-Cell1 </div> <div class="table-cell text-center p-2 border"> Row2-Cell1 </div> </div> </div> <div class="table-footer-group"> <div class="table-row"> <div class="table-cell text-center p-2 border bg-slate-100"> Footer 1 </div> <div class="table-cell text-center p-2 border bg-slate-100"> Footer 2 </div> </div> </div> </div> </body> </html>

示例 4

以下示例演示了Grid 和内联 Grid 类的使用。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <h2 class="text-3xl mb-2"> Tailwind CSS Display Grid Example </h2> <div class="grid bg-orange-200 p-2 mb-2 rounded text-center"> grid-Block 1 </div> <div class="grid bg-amber-200 p-2 mb-2 rounded text-center"> grid-Block 2 </div> <div class="grid bg-lime-200 p-2 mb-2 rounded text-center"> grid-Block 3 </div> <h2 class="text-3xl mb-2"> Tailwind CSS Display Inline-Grid Example </h2> <div class="inline-grid bg-orange-200 p-2 mb-2 rounded text-center"> grid-Block 1 </div> <div class="inline-grid bg-amber-200 p-2 mb-2 rounded text-center"> grid-Block 2 </div> <div class="inline-grid bg-lime-200 p-2 mb-2 rounded text-center"> grid-Block 3 </div> </body> </html>

示例 5

以下示例演示了Content、List-Item 和 Hidden 类的使用。

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8"> <h2 class="text-3xl mb-2"> Tailwind CSS Content Class Example </h2> <div class="contents"> <div class="bg-blue-200 p-4"> <p>This is part of a contents element.</p> </div> <div class="bg-green-200 p-4"> <p>This is also part of a contents element.</p> </div> </div> <h2 class="text-3xl my-2"> Tailwind CSS List-Item Class Example </h2> <div class="list-item"> Item 1 </div> <div class="list-item"> Item 2 </div> <div class="list-item"> Item 3 </div> <h2 class="text-3xl mt-2"> Tailwind CSS hidden Class Example </h2> <div class="hidden"> <p>This content is hidden and will not be displayed.</p> </div> </body> </html>
广告