Tailwind CSS - 布局



Tailwind CSS 布局包含一系列基于重要主题的实用程序类,用于创建有效的布局。它包含与元素定位、元素浮动、列、Z 索引、容器等相关的主题。

Tailwind CSS 布局参考

下面提到的主题可用于在元素上创建有效的布局。

主题 描述 示例
Tailwind CSS - 宽高比 宽高比用于定义元素所需的宽度和高度。
Tailwind CSS - 容器 容器用于在不同的断点内固定元素的宽度。
Tailwind CSS - 列 Columns 实用程序控制元素内的列数。
Tailwind CSS - 之后换行 之后换行用于强制在元素之后进行列换行或分页。
Tailwind CSS - 之前换行 之前换行用于强制在元素之前进行列换行或分页。
Tailwind CSS - 内部换行 内部换行提供了一种方法,用于控制列或页如何在元素内换行。
Tailwind CSS - 盒子装饰换行 盒子装饰换行演示了当元素被分割时,装饰属性如何在多行、多列或多页上呈现。
Tailwind CSS - 盒子大小 盒子大小定义了元素的宽度和高度如何计算为元素的总大小。
Tailwind CSS - 显示 显示用于确定元素如何在文档中显示。
Tailwind CSS - 浮动 浮动用于控制元素或内容的流程。
Tailwind CSS - 清除浮动 清除浮动用于控制内容围绕元素的环绕方式。
Tailwind CSS - 隔离 隔离用于显式创建新的堆叠上下文。
Tailwind CSS - 对象适应 对象适应用于调整图像或视频在其容器中的大小。
Tailwind CSS - 对象位置 对象位置用于在容器内定位对象。
Tailwind CSS - 溢出 溢出用于处理过大的内容。
Tailwind CSS - 滚动行为 滚动行为用于处理元素的溢出行为。
Tailwind CSS - 位置 位置用于在文档对象模型中对齐元素。
Tailwind CSS - 上/右/下/左 顶部/右侧/底部/左侧用于对齐定位元素。
Tailwind CSS - 可见性 可见性用于控制元素的可见性。
Tailwind CSS - Z轴索引 Z轴索引用于控制元素的堆叠顺序。

Tailwind CSS布局示例

下面的示例将简要介绍布局类。

示例1

在下面的示例中,我们将介绍上面提到的部分类。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-2"> <h1 class="text-2xl"> Tailwind CSS Display- Inline-Block and Floats Class </h1> <h2 class="text-xl my-2 text-violet-600"> Display - Inline-block </h2> <li class="inline-block h-12 w-32 border-2 rounded p-1 border-blue-700"> Inline-Block 1 </li> <li class="inline-block h-12 w-32 border-2 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> <h2 class="text-xl my-2 float-ri text-violet-600"> Float Class On Inline-Block </h2> <p> In this example we have used we have Float-right property with inline-block element which floated those element in the right. </p> <div class="float-right mt-3"> <li class="inline-block h-12 w-32 border-2 rounded p-1 border-blue-700"> Inline-Block 1 </li> <li class="inline-block h-12 w-32 border-2 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> </div> </body> </html>

示例2

在下面的示例中,我们将介绍Tailwind CSS的Right-0和Visibility类。

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8"> <h2 class="text-3xl"> Tailwind CSS Right-0 Class </h1> <div class="relative h-28 w-28 bg-lime-300 m-4"> <div class="absolute right-0 w-9 h-9 bg-lime-700"></div> </div> <h2 class="text-2xl"> Tailwind CSS Visibility class </h2> <p> In the following example Invisible class is applied to the inner div which will hide it but it will take its space in the layout. </p> <div class="relative h-28 w-28 bg-lime-300 m-4"> <div class="absolute right-0 invisible w-9 h-9 bg-lime-700"></div> </div> </body> </html>
广告