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 - Z 轴 | Z 轴用于控制元素的堆叠顺序。 |
Tailwind CSS 布局示例
以下示例将简要介绍布局类
示例 1
在下面的示例中，我们将介绍一些上面提到的类
<!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 类。
<!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>
