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: 它使元素不可见并将其从文档流中移除。

Tailwind CSS 显示类示例

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

示例 1

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

<!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 类的使用。

<!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 类的使用。

<!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 类的使用。

<!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 类的使用。

<!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>
打印页面
上一页
下一页
广告