首页 > 编程语言 >Tailwindcss Layout布局相关样式及实战案例，5万字长文，附完整源码和效果截图

Tailwindcss Layout布局相关样式及实战案例，5万字长文，附完整源码和效果截图

时间：2024-06-08 18:33:16浏览次数：21  
标签：right Layout bottom end inset 源码 Tailwindcss rem inline

aspect 相关样式类

基础样式

ClassProperties
aspect-autoaspect-ratio: auto;
aspect-squareaspect-ratio: 1 / 1;
aspect-videoaspect-ratio: 16 / 9;

案例：引入B站视频

Use the aspect-* utilities to set the desired aspect ratio of an element.

使用’ aspect-* '实用工具来设置元素所需的长宽比。

<script setup>
</script>

<template>
  <iframe class="w-full aspect-video" src="https://www.bilibili.com/video/av478818261?t=5.4"></iframe>
</template>

<style scoped>
</style>

Tailwind doesn’t include a large set of aspect ratio values out of the box since it’s easier to just use arbitrary values. See the arbitrary values section for more information.

Tailwind不包含大量的宽高比值，因为使用任意值更容易。更多信息请参见任意值一节。

The aspect-* utilities use the native aspect-ratio CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind’s aspect-ratio plugin is a good alternative.

“aspect-*”实用程序使用原生的“aspect-ratio”CSS属性，该属性在Safari版本15之前不支持。在Safari 15普及之前，Tailwind的长宽比插件是一个不错的选择。

在这里插入图片描述

container 样式类

A component for fixing an element’s width to the current breakpoint.

用于将元素的宽度固定到当前断点的组件。

基础样式

ClassBreakpointProperties
containerNonewidth: 100%;
sm (640px)max-width: 640px;
md (768px)max-width: 768px;
lg (1024px)max-width: 1024px;
xl (1280px)max-width: 1280px;
2xl (1536px)max-width: 1536px;

The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

’ container ‘类设置元素的’ max-width ‘以匹配当前断点的’ min-width '。如果你更愿意设计一组固定的屏幕尺寸，而不是尝试适应一个完全流动的视口，这是很有用的。

Note that unlike containers you might have used in other frameworks, Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding.

请注意，与您可能在其他框架中使用的容器不同，Tailwind的容器不会自动居中，也没有任何内置的水平填充

案例：水平居中的容器

To center a container, use the mx-auto utility:

要居中一个容器，使用’ mx-auto '工具:

<template>
  <div>
    <div class="container h-12 bg-yellow-400 mx-auto">
        <h1>你好，Vue3</h1>
    </div>
  </div>
</template>

代码解释：

  • container：设置div为容器
  • h-12：设置高度
  • bg-yellow-400：设置背景色
  • mx-auto：自动计算水平外边距，能够实现居中效果

在这里插入图片描述

案例：添加水平内边距

To add horizontal padding, use the px-{size} utilities:

要添加水平边距，使用’ px-{size} '实用程序:

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

vue3实战案例：

<template>
  <div class="container mx-auto bg-indigo-500 px-3">
    <div class="text-3xl bg-purple-500 text-white">这是子元素</div>
  </div>
</template>

Columns 样式类

Utilities for controlling the number of columns within an element.

用于控制元素内列数的实用程序。

基础样式

ClassProperties
columns-1columns: 1;
columns-2columns: 2;
columns-3columns: 3;
columns-4columns: 4;
columns-5columns: 5;
columns-6columns: 6;
columns-7columns: 7;
columns-8columns: 8;
columns-9columns: 9;
columns-10columns: 10;
columns-11columns: 11;
columns-12columns: 12;
columns-autocolumns: auto;
columns-3xscolumns: 16rem; /* 256px */
columns-2xscolumns: 18rem; /* 288px */
columns-xscolumns: 20rem; /* 320px */
columns-smcolumns: 24rem; /* 384px */
columns-mdcolumns: 28rem; /* 448px */
columns-lgcolumns: 32rem; /* 512px */
columns-xlcolumns: 36rem; /* 576px */
columns-2xlcolumns: 42rem; /* 672px */
columns-3xlcolumns: 48rem; /* 768px */
columns-4xlcolumns: 56rem; /* 896px */
columns-5xlcolumns: 64rem; /* 1024px */
columns-6xlcolumns: 72rem; /* 1152px */
columns-7xlcolumns: 80rem; /* 1280px */

基础样式总结

columns-1 到 columns-12，设置列数分别为1到12列。

columns-xl 到 columns-7xl，设置每列的宽度，数字越大，宽度越大。

columns-3xs columns-2xs colums-xs columns-sm columns-md columns-lg 自动根据屏幕大小设置列数。

案例：一行三列的布局

代码解析：

  • columns-3：一行三列的布局
  • gap-8：每一列的间隙，值越大，间隙越大
  • h-screen：占满屏幕高度
  • w-full：占满父容器宽度
<script setup>
</script>

<template>
  <div class="columns-3 gap-8 bg-green-300 h-screen">
    <div class="w-full h-32 bg-blue-500"></div>
    <div class="w-full h-32 bg-yellow-300"></div>
    <div class="w-full h-32 bg-cyan-300"></div>
  </div>
</template>

<style scoped>
</style>

在这里插入图片描述

案例：瀑布流图片

Use the columns-{count} utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number.

使用“columns-{count}”实用程序设置应为元素内的内容创建的列数。列宽度将自动调整以适应该数字。

vue3实战案例：

  • columns-3：将内容自动拆分成3列，不需要自己手动管理，CSS会对内容自动划分为3列
  • gap-3：设置每列的间距，数字越大，间距越大
  • aspect-video：符合视频长宽比的一种长方形结构
  • aspect-square：一种偏向于正方形的结构
<template>
  <div class="columns-3 gap-3">
    <!--
    columns-3：将内容自动拆分成3列，不需要自己手动管理，CSS会对内容自动划分为3列
    aspect-video：符合视频长宽比的一种长方形结构
    aspect-square：一种偏向于正方形的结构
    -->
    <img class="w-full aspect-video mb-3" src="/1.jpg" />
    <img class="w-full aspect-square mb-3" src="/2.jpg" />
    <img class="w-full aspect-video mb-3" src="/3.jpg" />
    <img class="w-full aspect-square mb-3" src="/1.jpg" />
    <img class="w-full aspect-video mb-3" src="/2.jpg" />
    <img class="w-full aspect-square mb-3" src="/3.jpg" />
  </div>
</template>

在这里插入图片描述

案例：通过宽度设置瀑瀑布流图片

Use the columns-{width} utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value.

使用’ columns-{width} '实用程序为元素内的内容设置理想的列宽度，列数(计数)会自动调整以适应该值。

This “t-shirt” scale is the same as the max-width scale, with the addition of 2xs and 3xs, since smaller columns may be desirable.

这种“t恤”比例与max-width比例相同，增加了“2xs”和“3xs”，因为可能需要更小的列。

vue3示例：

<template>
  <div class="columns-3xs gap-3 bg-purple-500">
    <!--
    columns-3xs：columns: 16rem; /* 256px */。即就是说，1列的宽度是256px。
    aspect-video：符合视频长宽比的一种长方形结构
    aspect-square：一种偏向于正方形的结构
    -->
    <img class="w-full aspect-video mb-3" src="/1.jpg" />
    <img class="w-full aspect-square mb-3" src="/2.jpg" />
    <img class="w-full aspect-video mb-3" src="/3.jpg" />
    <img class="w-full aspect-square mb-3" src="/1.jpg" />
    <img class="w-full aspect-video mb-3" src="/2.jpg" />
    <img class="w-full aspect-square mb-3" src="/3.jpg" />
  </div>
</template>

在这里插入图片描述

从结果我们可以发现，父元素是占满了整个屏幕的。不过，分出来的列没有将整个屏幕均分以后再换到新的列。

这里看上去就像是固定3列一样。

break-after 样式类

Utilities for controlling how a column or page should break after an element.

用于控制列或页面在元素之后如何中断的实用程序。

基础样式

ClassProperties
break-after-autobreak-after: auto;
break-after-avoidbreak-after: avoid;
break-after-allbreak-after: all;
break-after-avoid-pagebreak-after: avoid-page;
break-after-pagebreak-after: page;
break-after-leftbreak-after: left;
break-after-rightbreak-after: right;
break-after-columnbreak-after: column;

案例：break-after-column自动切换列

Use the break-after-{value} utilities to control how a column or page break should behave after an element. For example, use the break-after-column utility to force a column break after an element.

使用“break-after-{value}”实用程序来控制列或页分隔符在元素之后的行为。例如，使用’ break-after-column '实用程序强制在元素之后进行列分隔。

vue3示例：

<template>
  <div class="columns-2">
    <p>第一行</p>
    <p class="break-after-column">加了break-after-column的行</p>
    <p>会从break-after-column的元素自动切换到第二列</p>
    <p>第二列的第二行</p>
  </div>
</template>

在这里插入图片描述

这个样式类本身并不能起到切割列的功能，只能起到辅助作用。

break-before 样式类

Utilities for controlling how a column or page should break before an element.

用于控制列或页在元素之前如何中断的实用程序。

基础样式

ClassProperties
break-before-autobreak-before: auto;
break-before-avoidbreak-before: avoid;
break-before-allbreak-before: all;
break-before-avoid-pagebreak-before: avoid-page;
break-before-pagebreak-before: page;
break-before-leftbreak-before: left;
break-before-rightbreak-before: right;
break-before-columnbreak-before: column;

案例：break-before-column自动切换列

Use the break-before-{value} utilities to control how a column or page break should behave before an element. For example, use the break-before-column utility to force a column break before an element.

使用’ break-before-{value} ‘实用程序来控制列或页分隔符在元素之前的行为。例如，使用’ break-before-column '实用程序强制在元素之前进行列分隔。

vue3示例：

<template>
  <div class="columns-2">
    <p>第一行</p>
    <p class="break-before-column">加了break-before-column的行</p>
    <p>会从break-before-column元素自动切换到第二列</p>
    <p>第二列的第二行</p>
  </div>
</template>

在这里插入图片描述

从结果可以看到，列会从 break-before-column 修饰的元素之前自动切换到新的列。

break-inside 样式类

Utilities for controlling how a column or page should break within an element.

用于控制列或页面在元素中如何断开的实用程序。

基础样式

ClassProperties
break-inside-autobreak-inside: auto;
break-inside-avoidbreak-inside: avoid;
break-inside-avoid-pagebreak-inside: avoid-page;
break-inside-avoid-columnbreak-inside: avoid-column;

案例：break-inside-avoid-column自动切换列

Use the break-inside-{value} utilities to control how a column or page break should behave within an element. For example, use the break-inside-avoid-column utility to avoid a column break within an element.

使用“break-inside-{value}”实用程序来控制列或页分隔符在元素中的行为。例如，使用’ break-inside-avoid-column '实用工具来避免元素中的列分隔符。

vue3示例：

<template>
  <div class="columns-2">
    <p>第一行</p>
    <p class="break-inside-avoid-column">加了break-inside-avoid-column的行</p>
    <p>会从break-inside-avoid-column元素自动切换到第二列</p>
    <p>第二列的第二行</p>
  </div>
</template>

在这里插入图片描述

从结果可以看到，会从 break-inside-avoid-column 修饰的元素之后自动切换到新的列。这点和 break-after 类似。

box-decoration 样式类

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

用于控制如何跨多行、多列或多页呈现元素片段的实用程序。

基础样式

ClassProperties
box-decoration-clonebox-decoration-break: clone;
box-decoration-slicebox-decoration-break: slice;

案例：文字换行后的渐变方式

Use the box-decoration-slice and box-decoration-clone utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks.

使用“box-decoration-slice”和“box-decoration-clone”实用工具来控制诸如背景、边框、边框图像、box-shadow、clip-path、margin和padding等属性是否应该呈现为元素是一个连续的片段还是不同的块。

vue3示例：

<template>
    <span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2">
      hello，<br/>
      word
    </span>

    <span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2">
      hello，<br/>
      word
    </span>
</template>

在这里插入图片描述

从结果我们可以观察到：

  • box-decoration-slice：换行以后，整体还是一个区域，整体是一个渐变颜色
  • box-decoration-clone：换行以后，整体是多个区域，每个区域都有自己独立的渐变颜色

box 样式类

Utilities for controlling how the browser should calculate an element’s total size.

用于控制浏览器如何计算元素的总大小的实用程序。

基础样式

ClassProperties
box-borderbox-sizing: border-box;
box-contentbox-sizing: content-box;

案例：包含边框和内边距

Use box-border to set an element’s box-sizing to border-box, telling the browser to include the element’s borders and padding when you give it a height or width.

使用’ box-border ‘将元素的’ box-sizing ‘设置为’ border-box '，告诉浏览器当你设置元素的高度或宽度时，会包含元素的边框和内边距。

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px.

这意味着一个100px × 100px的元素，边框为2px，四周填充为4px，将被渲染为100px × 100px，内部内容区域为88px × 88px。

vue3示例：

<template>
  <div class="box-border h-32 w-32 p-4 border-4 bg-indigo-500">
    <!-- ... -->
  </div>
</template>

在这里插入图片描述

案例：不包含边框和内边距

Use box-content to set an element’s box-sizing to content-box, telling the browser to add borders and padding on top of the element’s specified width or height.

使用’ box-content ‘将元素的’ box-sizing ‘设置为’ content-box '，告诉浏览器在元素指定的宽度或高度之上添加边框和填充。

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px.

这意味着一个100px × 100px的元素，边框为2px，四周填充为4px，实际上渲染为112px × 112px，内部内容区域为100px × 100px。

vue3示例：

<template>
  <div class="box-border h-32 w-32 p-4 border-4 bg-indigo-500">
    <!-- ... -->
  </div>
  <hr>
  <div class="box-content h-32 w-32 p-4 border-4 bg-indigo-500">
    <!-- ... -->
  </div>
</template>

在这里插入图片描述

从结果可以看出来，box-content的盒子明显比box-border的盒子要大一点。

在实际开发中，建议将盒模型统一转换为box-border盒模型，这样能够避免一些不必要的布局错误。

display 样式类

Utilities for controlling the display box type of an element.

用于控制元素的显示框类型的实用程序。

基础样式类

ClassProperties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

案例：块元素和行内元素

Use inline, inline-block, and block to control the flow of text and elements.

使用inline、inline-block和block来控制文本和元素的流动。

vue3示例：

<template>
  <!--
   inline：将元素设置为行内元素
   inline-block：将元素设置为行内块元素
   block：将元素设置为块元素
  -->
  <div>
    正常是块级元素
    <span class="inline bg-blue-500">display: inline 能够在一行内显示，不能设置宽高</span>
    <span class="inline-block h-32 bg-red-300">display: inline-block 能够在一行内显示且可以设置宽高</span>
    <span class="block w-32 h-32 bg-yellow-300">display: block 会独占一行</span>
    其他内容。。。
  </div>
</template>

在这里插入图片描述

案例：contents内容

使用contents创建一个“幻影”容器，其子容器的行为类似于父容器的直接子容器。

<script setup>
</script>

<template>
  <div class="flex gap-8">
    <div class="flex-1 bg-yellow-300">01</div>
    <div class="contents">
      <div class="flex-1 bg-yellow-300">02</div>
      <div class="flex-1 bg-yellow-300">03</div>
    </div>
    <div class="flex-1 bg-yellow-300">04</div>
  </div>
</template>

<style scoped>
</style>

在这里插入图片描述

案例：table表格布局

使用table、table-row、table-cell、table- title、table-column、table-column-group、table-header-group、table-row-group和table-foot -group实用工具创建行为类似于各自表元素的元素。

<script setup>
</script>

<template>
  <!--表格-->
  <div class="table w-full">
    <!--表头-->
    <div class="table-header-group">
      <div class="table-row">
        <div class="table-cell text-left">姓名</div>
        <div class="table-cell text-left">年龄</div>
        <div class="table-cell text-left">性别</div>
      </div>
    </div>
    <div class="table-row-group">
      <!--一行-->
      <div class="table-row">
        <div class="table-cell">张三</div>
        <div class="table-cell">23</div>
        <div class="table-cell">男</div>
      </div>
      <div class="table-row">
        <div class="table-cell">李思思</div>
        <div class="table-cell">24</div>
        <div class="table-cell">女</div>
      </div>
      <div class="table-row">
        <div class="table-cell">王舞</div>
        <div class="table-cell">25</div>
        <div class="table-cell">女</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>

在这里插入图片描述

案例：hidden隐藏元素

使用hidden将元素设置为display: none，并将其从页面布局中移除。

<script setup>
</script>

<template>
  <div class="flex gap-8">
    <div class="hidden">01</div>
    <div class="w-9 h-9 bg-yellow-300">02</div>
    <div class="w-9 h-9 bg-yellow-300">03</div>
  </div>
</template>

<style scoped>
</style>

在这里插入图片描述

float 样式类

Utilities for controlling the wrapping of content around an element.

用于控制围绕元素的内容包装的实用程序。

基础样式

ClassProperties
float-startfloat: inline-start;
float-endfloat: inline-end;
float-rightfloat: right;
float-leftfloat: left;
float-nonefloat: none;

案例：float-right 右侧浮动

Use float-right to float an element to the right of its container.

使用float-right将元素浮动到其容器的右侧。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-3/12 h-32 bg-blue-500">
    <img class="float-right w-9 h-9 bg-yellow-300">
    <p>{{ zdpjs_rand.randCaiing()}}</p>
  </div>
</template>

在这里插入图片描述

案例：float-left 左侧浮动

Use float-left to float an element to the left of its container.

使用float-left将元素浮动到其容器的左侧。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-3/12 h-32 bg-blue-500">
    <img class="float-left w-9 h-9 bg-yellow-300">
    <p>{{ zdpjs_rand.randCaiing()}}</p>
  </div>
</template>

在这里插入图片描述

案例：float-none 禁用浮动

Use float-none to reset any floats that are applied to an element. This is the default value for the float property.

使用float-none重置任何应用于元素的浮动。这是float属性的默认值。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-3/12 h-32 bg-blue-500">
    <img class="float-none w-9 h-9 bg-yellow-300">
    <p>{{ zdpjs_rand.randCaiing()}}</p>
  </div>
</template>

在这里插入图片描述

clear 样式类

Utilities for controlling the wrapping of content around an element.

用于控制围绕元素的内容包装的实用程序。

基础样式

ClassProperties
clear-startclear: inline-start;
clear-endclear: inline-end;
clear-leftclear: left;
clear-rightclear: right;
clear-bothclear: both;
clear-noneclear: none;

案例：clear 清除左边浮动

Use clear-left to position an element below any preceding left-floated elements.

使用’ clear-left '将一个元素定位在前面的左浮动元素的下面。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-3/12 h-32 bg-blue-500">
    <img class="float-left w-9 h-9 bg-yellow-300">
    <img class="float-right w-9 h-9 bg-yellow-300">
    <p class="clear-left">{{ zdpjs_rand.randCaiing()}}</p>
  </div>
</template>

在这里插入图片描述

案例：清除右边浮动

Use clear-right to position an element below any preceding right-floated elements.

使用clear-right将元素定位在前面任何右浮动元素的下方。

vue3示例：

<template>
  <article>
    <img class="float-left w-32" src="/1.jpg">
    <img class="float-right w-32" src="/2.jpg">
    <p class="clear-right">{{ zdpjs_rand.randCaiing()}}</p>
  </article>
</template>
<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

在这里插入图片描述

案例：清除所有浮动

Use clear-both to position an element below all preceding floated elements.

使用’ clear-both '将元素定位在前面所有浮动元素的下方。

vue3示例：

<template>
  <article>
    <img class="float-left w-32" src="/1.jpg">
    <img class="float-right w-32" src="/2.jpg">
    <p class="clear-both">{{ zdpjs_rand.randCaiing()}}</p>
  </article>
</template>
<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

在这里插入图片描述

isolation 样式类

Utilities for controlling whether an element should explicitly create a new stacking context.

用于控制元素是否应该显式地创建新的堆叠上下文的实用程序。

基础样式

ClassProperties
isolateisolation: isolate;
isolation-autoisolation: auto;

基本用法

Use the isolate and isolation-auto utilities to control whether an element should explicitly create a new stacking context.

使用isolate和isolation-auto实用程序来控制元素是否应该显式地创建一个新的堆叠上下文。

<div class="isolate ...">
  <!-- ... -->
</div>

object-fit 样式类

Utilities for controlling how a replaced element’s content should be resized.

用于控制如何调整已替换元素的内容大小的实用程序。

基础样式

ClassProperties
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

基本用法

Resize an element’s content to cover its container using object-cover.

使用object-cover调整元素的内容大小以覆盖其容器。

<div class="bg-indigo-300 ...">
  <img class="object-cover h-48 w-96 ...">
</div>

案例：覆盖容器

<template>
  <div class="bg-indigo-300">
    <img class="object-cover h-48 w-96" src="/1.jpg">
  </div>
</template>

在这里插入图片描述

案例：contain包含图片

Resize an element’s content to stay contained within its container using object-contain.

使用object-contain调整元素内容的大小，使其保持在其容器内。

<template>
  <div class="bg-indigo-300">
    <img class="object-contain h-48 w-96" src="/1.jpg">
  </div>
</template>

在这里插入图片描述

案例：fill 填充图片

Stretch an element’s content to fit its container using object-fill.

使用object-fill拉伸元素的内容以适合其容器。

<template>
  <div class="bg-indigo-300">
    <img class="object-fill h-48 w-96" src="/1.jpg">
  </div>
</template>

在这里插入图片描述

案例：scale 缩放图片

Display an element’s content at its original size but scale it down to fit its container if necessary using object-scale-down.

以元素的原始大小显示元素的内容，但在必要时使用object-scale-down将其缩小以适合其容器。

<template>
  <div class="bg-indigo-300">
    <img class="object-scale-down h-48 w-96" src="/1.jpg">
  </div>
</template>

在这里插入图片描述

案例：none 使用原始图片

Display an element’s content at its original size ignoring the container size using object-none.

使用object-none以原始大小显示元素的内容，忽略容器大小。

<template>
  <div class="bg-indigo-300">
    <img class="object-none h-48 w-96" src="/1.jpg">
  </div>
</template>

在这里插入图片描述

object-position 样式类

Utilities for controlling how a replaced element’s content should be positioned within its container.

用于控制已替换元素的内容如何在其容器中定位的实用程序。

基础样式

ClassProperties
object-bottomobject-position: bottom;
object-centerobject-position: center;
object-leftobject-position: left;
object-left-bottomobject-position: left bottom;
object-left-topobject-position: left top;
object-rightobject-position: right;
object-right-bottomobject-position: right bottom;
object-right-topobject-position: right top;
object-topobject-position: top;

案例：图片位置

Use the object-{side} utilities to specify how a replaced element’s content should be positioned within its container.

使用object-{side}实用程序来指定被替换元素的内容应该如何在其容器中定位。

<template>
  <div class="bg-indigo-300 flex gap-8">
    <img class="object-none object-left-top bg-yellow-300  w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-top bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-right-top bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-left bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-center bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-right bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-left-bottom bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-bottom bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
    <img class="object-none object-right-bottom bg-yellow-300   w-[120px] h-[120px] /1-sm.jpg" src="/1-sm.jpg">
  </div>
</template>

在这里插入图片描述

overflow 样式类

Utilities for controlling how an element handles content that is too large for the container.

用于控制元素如何处理对容器来说太大的内容的实用程序。

基础样式

ClassProperties
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

案例：超出容器显示

Use overflow-visible to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

使用overflow-visible来防止元素中的内容被剪切。注意，任何超出元素边界的内容都是可见的。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-32 h-12 bg-indigo-500 overflow-visible">
    {{ zdpjs_rand.randCaiJing() }}
  </div>
</template>

在这里插入图片描述

案例：超出容器隐藏

Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

使用overflow-hidden来截取元素中超出该元素边界的任何内容。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-32 h-12 bg-indigo-500 overflow-hidden">
    {{ zdpjs_rand.randCaiJing() }}
  </div>
</template>

在这里插入图片描述

案例：超出容器滚动

Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

使用overflow-auto在元素的内容超出元素边界的情况下为元素添加滚动条。与总是显示滚动条的overflow-scroll不同，此实用程序仅在需要滚动时显示滚动条。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-32 h-12 bg-indigo-500 overflow-auto">
    {{ zdpjs_rand.randCaiJing() }}
  </div>
</template>

在这里插入图片描述

overscroll-behavior 样式类

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

用于控制到达滚动区域边界时浏览器行为的实用程序。

基础样式

ClassProperties
overscroll-autooverscroll-behavior: auto;
overscroll-containoverscroll-behavior: contain;
overscroll-noneoverscroll-behavior: none;
overscroll-y-autooverscroll-behavior-y: auto;
overscroll-y-containoverscroll-behavior-y: contain;
overscroll-y-noneoverscroll-behavior-y: none;
overscroll-x-autooverscroll-behavior-x: auto;
overscroll-x-containoverscroll-behavior-x: contain;
overscroll-x-noneoverscroll-behavior-x: none;

案例：滚动包含

Use overscroll-contain to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve “bounce” effects when scrolling past the end of the container in operating systems that support it.

使用overscroll-contain可以防止目标区域中的滚动触发父元素中的滚动，但在支持该操作系统的操作系统中，当滚动超过容器的末端时保留“弹跳”效果。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-1/2 h-12 bg-indigo-500 overflow-auto overscroll-contain">
    {{ zdpjs_rand.randCaiJing() }}
  </div>
</template>

在这里插入图片描述

案例：防止父元素滚动

Use overscroll-none to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent “bounce” effects when scrolling past the end of the container.

使用overscroll-none可以防止目标区域的滚动触发父元素的滚动，也可以防止滚动超过容器末端时出现“弹跳”效果。

vue3示例：

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="w-1/2 h-12 bg-indigo-500 overflow-auto">
    {{ zdpjs_rand.randCaiJing() }}

    <div class="w-1/2 h-12 bg-indigo-500 overflow-auto overscroll-none">
      {{ zdpjs_rand.randCaiJing() }}
    </div>
  </div>
</template>

在这里插入图片描述

position 样式类

Utilities for controlling how an element is positioned in the DOM.

用于控制元素在DOM中如何定位的实用程序。

基础样式

ClassProperties
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

案例：静态定位和绝对定位

Use static to position an element according to the normal flow of the document.

使用static根据文档的正常流程来定位元素。

Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.

任何偏移将被忽略，该元素不会作为绝对定位子元素的位置参考。

如果父元素是静态定位，则子元素会相对于body元素进行绝对定位。

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="static bg-red-300 w-screen h-[300px]">
    <p>{{ zdpjs_rand.randCaiJing() }}</p>
    <div class="absolute bottom-0 left-0 bg-blue-500">
      <p>{{ zdpjs_rand.randCaiJing() }}</p>
    </div>
  </div>
</template>

样式类分析：

  • bottom-0：距离底部的距离
  • left-0：距离左边的距离

在这里插入图片描述

案例：相对定位和绝对定位

Use relative to position an element according to the normal flow of the document.

使用相对来根据文档的正常流程定位元素。

Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

任何偏移量都是相对于元素的正常位置计算的，元素将作为绝对定位子元素的位置参考。

如果父元素是相对定位，则子元素会相对于父元素进行绝对定位。

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="relative bg-red-300 w-screen h-[300px]">
    <p>{{ zdpjs_rand.randCaiJing() }}</p>
    <div class="absolute bottom-0 left-0 bg-blue-500">
      <p>{{ zdpjs_rand.randCaiJing() }}</p>
    </div>
  </div>
</template>

在这里插入图片描述

案例：固定定位

Use fixed to position an element relative to the browser window.

使用fixed来定位元素相对于浏览器窗口的位置。

<script setup>
import zdpjs_rand from "../zdpjs/zdpjs_rand/index.js";
</script>

<template>
  <div class="relative bg-blue-500 w-[300px]">
    <div class="fixed top-0 left-0 right-0 bg-red-300 w-[300px]">联系人</div>
    <div class="flex flex-col gap-1" v-for="k in 100">
      <div class="flex items-center" :key="k">
        <img src="/1-sm.jpg" />
        <strong>{{zdpjs_rand.randName()}}</strong>
      </div>
    </div>
  </div>
</template>

在这里插入图片描述

offset 偏移样式类

Utilities for controlling the placement of positioned elements.

用于控制已定位元素位置的实用程序。

基础样式

ClassProperties
inset-0inset: 0px;
inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
start-0inset-inline-start: 0px;
end-0inset-inline-end: 0px;
top-0top: 0px;
right-0right: 0px;
bottom-0bottom: 0px;
left-0left: 0px;
inset-pxinset: 1px;
inset-x-pxleft: 1px; right: 1px;
inset-y-pxtop: 1px; bottom: 1px;
start-pxinset-inline-start: 1px;
end-pxinset-inline-end: 1px;
top-pxtop: 1px;
right-pxright: 1px;
bottom-pxbottom: 1px;
left-pxleft: 1px;
inset-0.5inset: 0.125rem; /* 2px */
inset-x-0.5left: 0.125rem; /* 2px / right: 0.125rem; / 2px */
inset-y-0.5top: 0.125rem; /* 2px / bottom: 0.125rem; / 2px */
start-0.5inset-inline-start: 0.125rem; /* 2px */
end-0.5inset-inline-end: 0.125rem; /* 2px */
top-0.5top: 0.125rem; /* 2px */
right-0.5right: 0.125rem; /* 2px */
bottom-0.5bottom: 0.125rem; /* 2px */
left-0.5left: 0.125rem; /* 2px */
inset-1inset: 0.25rem; /* 4px */
inset-x-1left: 0.25rem; /* 4px / right: 0.25rem; / 4px */
inset-y-1top: 0.25rem; /* 4px / bottom: 0.25rem; / 4px */
start-1inset-inline-start: 0.25rem; /* 4px */
end-1inset-inline-end: 0.25rem; /* 4px */
top-1top: 0.25rem; /* 4px */
right-1right: 0.25rem; /* 4px */
bottom-1bottom: 0.25rem; /* 4px */
left-1left: 0.25rem; /* 4px */
inset-1.5inset: 0.375rem; /* 6px */
inset-x-1.5left: 0.375rem; /* 6px / right: 0.375rem; / 6px */
inset-y-1.5top: 0.375rem; /* 6px / bottom: 0.375rem; / 6px */
start-1.5inset-inline-start: 0.375rem; /* 6px */
end-1.5inset-inline-end: 0.375rem; /* 6px */
top-1.5top: 0.375rem; /* 6px */
right-1.5right: 0.375rem; /* 6px */
bottom-1.5bottom: 0.375rem; /* 6px */
left-1.5left: 0.375rem; /* 6px */
inset-2inset: 0.5rem; /* 8px */
inset-x-2left: 0.5rem; /* 8px / right: 0.5rem; / 8px */
inset-y-2top: 0.5rem; /* 8px / bottom: 0.5rem; / 8px */
start-2inset-inline-start: 0.5rem; /* 8px */
end-2inset-inline-end: 0.5rem; /* 8px */
top-2top: 0.5rem; /* 8px */
right-2right: 0.5rem; /* 8px */
bottom-2bottom: 0.5rem; /* 8px */
left-2left: 0.5rem; /* 8px */
inset-2.5inset: 0.625rem; /* 10px */
inset-x-2.5left: 0.625rem; /* 10px / right: 0.625rem; / 10px */
inset-y-2.5top: 0.625rem; /* 10px / bottom: 0.625rem; / 10px */
start-2.5inset-inline-start: 0.625rem; /* 10px */
end-2.5inset-inline-end: 0.625rem; /* 10px */
top-2.5top: 0.625rem; /* 10px */
right-2.5right: 0.625rem; /* 10px */
bottom-2.5bottom: 0.625rem; /* 10px */
left-2.5left: 0.625rem; /* 10px */
inset-3inset: 0.75rem; /* 12px */
inset-x-3left: 0.75rem; /* 12px / right: 0.75rem; / 12px */
inset-y-3top: 0.75rem; /* 12px / bottom: 0.75rem; / 12px */
start-3inset-inline-start: 0.75rem; /* 12px */
end-3inset-inline-end: 0.75rem; /* 12px */
top-3top: 0.75rem; /* 12px */
right-3right: 0.75rem; /* 12px */
bottom-3bottom: 0.75rem; /* 12px */
left-3left: 0.75rem; /* 12px */
inset-3.5inset: 0.875rem; /* 14px */
inset-x-3.5left: 0.875rem; /* 14px / right: 0.875rem; / 14px */
inset-y-3.5top: 0.875rem; /* 14px / bottom: 0.875rem; / 14px */
start-3.5inset-inline-start: 0.875rem; /* 14px */
end-3.5inset-inline-end: 0.875rem; /* 14px */
top-3.5top: 0.875rem; /* 14px */
right-3.5right: 0.875rem; /* 14px */
bottom-3.5bottom: 0.875rem; /* 14px */
left-3.5left: 0.875rem; /* 14px */
inset-4inset: 1rem; /* 16px */
inset-x-4left: 1rem; /* 16px / right: 1rem; / 16px */
inset-y-4top: 1rem; /* 16px / bottom: 1rem; / 16px */
start-4inset-inline-start: 1rem; /* 16px */
end-4inset-inline-end: 1rem; /* 16px */
top-4top: 1rem; /* 16px */
right-4right: 1rem; /* 16px */
bottom-4bottom: 1rem; /* 16px */
left-4left: 1rem; /* 16px */
inset-5inset: 1.25rem; /* 20px */
inset-x-5left: 1.25rem; /* 20px / right: 1.25rem; / 20px */
inset-y-5top: 1.25rem; /* 20px / bottom: 1.25rem; / 20px */
start-5inset-inline-start: 1.25rem; /* 20px */
end-5inset-inline-end: 1.25rem; /* 20px */
top-5top: 1.25rem; /* 20px */
right-5right: 1.25rem; /* 20px */
bottom-5bottom: 1.25rem; /* 20px */
left-5left: 1.25rem; /* 20px */
inset-6inset: 1.5rem; /* 24px */
inset-x-6left: 1.5rem; /* 24px / right: 1.5rem; / 24px */
inset-y-6top: 1.5rem; /* 24px / bottom: 1.5rem; / 24px */
start-6inset-inline-start: 1.5rem; /* 24px */
end-6inset-inline-end: 1.5rem; /* 24px */
top-6top: 1.5rem; /* 24px */
right-6right: 1.5rem; /* 24px */
bottom-6bottom: 1.5rem; /* 24px */
left-6left: 1.5rem; /* 24px */
inset-7inset: 1.75rem; /* 28px */
inset-x-7left: 1.75rem; /* 28px / right: 1.75rem; / 28px */
inset-y-7top: 1.75rem; /* 28px / bottom: 1.75rem; / 28px */
start-7inset-inline-start: 1.75rem; /* 28px */
end-7inset-inline-end: 1.75rem; /* 28px */
top-7top: 1.75rem; /* 28px */
right-7right: 1.75rem; /* 28px */
bottom-7bottom: 1.75rem; /* 28px */
left-7left: 1.75rem; /* 28px */
inset-8inset: 2rem; /* 32px */
inset-x-8left: 2rem; /* 32px / right: 2rem; / 32px */
inset-y-8top: 2rem; /* 32px / bottom: 2rem; / 32px */
start-8inset-inline-start: 2rem; /* 32px */
end-8inset-inline-end: 2rem; /* 32px */
top-8top: 2rem; /* 32px */
right-8right: 2rem; /* 32px */
bottom-8bottom: 2rem; /* 32px */
left-8left: 2rem; /* 32px */
inset-9inset: 2.25rem; /* 36px */
inset-x-9left: 2.25rem; /* 36px / right: 2.25rem; / 36px */
inset-y-9top: 2.25rem; /* 36px / bottom: 2.25rem; / 36px */
start-9inset-inline-start: 2.25rem; /* 36px */
end-9inset-inline-end: 2.25rem; /* 36px */
top-9top: 2.25rem; /* 36px */
right-9right: 2.25rem; /* 36px */
bottom-9bottom: 2.25rem; /* 36px */
left-9left: 2.25rem; /* 36px */
inset-10inset: 2.5rem; /* 40px */
inset-x-10left: 2.5rem; /* 40px / right: 2.5rem; / 40px */
inset-y-10top: 2.5rem; /* 40px / bottom: 2.5rem; / 40px */
start-10inset-inline-start: 2.5rem; /* 40px */
end-10inset-inline-end: 2.5rem; /* 40px */
top-10top: 2.5rem; /* 40px */
right-10right: 2.5rem; /* 40px */
bottom-10bottom: 2.5rem; /* 40px */
left-10left: 2.5rem; /* 40px */
inset-11inset: 2.75rem; /* 44px */
inset-x-11left: 2.75rem; /* 44px / right: 2.75rem; / 44px */
inset-y-11top: 2.75rem; /* 44px / bottom: 2.75rem; / 44px */
start-11inset-inline-start: 2.75rem; /* 44px */
end-11inset-inline-end: 2.75rem; /* 44px */
top-11top: 2.75rem; /* 44px */
right-11right: 2.75rem; /* 44px */
bottom-11bottom: 2.75rem; /* 44px */
left-11left: 2.75rem; /* 44px */
inset-12inset: 3rem; /* 48px */
inset-x-12left: 3rem; /* 48px / right: 3rem; / 48px */
inset-y-12top: 3rem; /* 48px / bottom: 3rem; / 48px */
start-12inset-inline-start: 3rem; /* 48px */
end-12inset-inline-end: 3rem; /* 48px */
top-12top: 3rem; /* 48px */
right-12right: 3rem; /* 48px */
bottom-12bottom: 3rem; /* 48px */
left-12left: 3rem; /* 48px */
inset-14inset: 3.5rem; /* 56px */
inset-x-14left: 3.5rem; /* 56px / right: 3.5rem; / 56px */
inset-y-14top: 3.5rem; /* 56px / bottom: 3.5rem; / 56px */
start-14inset-inline-start: 3.5rem; /* 56px */
end-14inset-inline-end: 3.5rem; /* 56px */
top-14top: 3.5rem; /* 56px */
right-14right: 3.5rem; /* 56px */
bottom-14bottom: 3.5rem; /* 56px */
left-14left: 3.5rem; /* 56px */
inset-16inset: 4rem; /* 64px */
inset-x-16left: 4rem; /* 64px / right: 4rem; / 64px */
inset-y-16top: 4rem; /* 64px / bottom: 4rem; / 64px */
start-16inset-inline-start: 4rem; /* 64px */
end-16inset-inline-end: 4rem; /* 64px */
top-16top: 4rem; /* 64px */
right-16right: 4rem; /* 64px */
bottom-16bottom: 4rem; /* 64px */
left-16left: 4rem; /* 64px */
inset-20inset: 5rem; /* 80px */
inset-x-20left: 5rem; /* 80px / right: 5rem; / 80px */
inset-y-20top: 5rem; /* 80px / bottom: 5rem; / 80px */
start-20inset-inline-start: 5rem; /* 80px */
end-20inset-inline-end: 5rem; /* 80px */
top-20top: 5rem; /* 80px */
right-20right: 5rem; /* 80px */
bottom-20bottom: 5rem; /* 80px */
left-20left: 5rem; /* 80px */
inset-24inset: 6rem; /* 96px */
inset-x-24left: 6rem; /* 96px / right: 6rem; / 96px */
inset-y-24top: 6rem; /* 96px / bottom: 6rem; / 96px */
start-24inset-inline-start: 6rem; /* 96px */
end-24inset-inline-end: 6rem; /* 96px */
top-24top: 6rem; /* 96px */
right-24right: 6rem; /* 96px */
bottom-24bottom: 6rem; /* 96px */
left-24left: 6rem; /* 96px */
inset-28inset: 7rem; /* 112px */
inset-x-28left: 7rem; /* 112px / right: 7rem; / 112px */
inset-y-28top: 7rem; /* 112px / bottom: 7rem; / 112px */
start-28inset-inline-start: 7rem; /* 112px */
end-28inset-inline-end: 7rem; /* 112px */
top-28top: 7rem; /* 112px */
right-28right: 7rem; /* 112px */
bottom-28bottom: 7rem; /* 112px */
left-28left: 7rem; /* 112px */
inset-32inset: 8rem; /* 128px */
inset-x-32left: 8rem; /* 128px / right: 8rem; / 128px */
inset-y-32top: 8rem; /* 128px / bottom: 8rem; / 128px */
start-32inset-inline-start: 8rem; /* 128px */
end-32inset-inline-end: 8rem; /* 128px */
top-32top: 8rem; /* 128px */
right-32right: 8rem; /* 128px */
bottom-32bottom: 8rem; /* 128px */
left-32left: 8rem; /* 128px */
inset-36inset: 9rem; /* 144px */
inset-x-36left: 9rem; /* 144px / right: 9rem; / 144px */
inset-y-36top: 9rem; /* 144px / bottom: 9rem; / 144px */
start-36inset-inline-start: 9rem; /* 144px */
end-36inset-inline-end: 9rem; /* 144px */
top-36top: 9rem; /* 144px */
right-36right: 9rem; /* 144px */
bottom-36bottom: 9rem; /* 144px */
left-36left: 9rem; /* 144px */
inset-40inset: 10rem; /* 160px */
inset-x-40left: 10rem; /* 160px / right: 10rem; / 160px */
inset-y-40top: 10rem; /* 160px / bottom: 10rem; / 160px */
start-40inset-inline-start: 10rem; /* 160px */
end-40inset-inline-end: 10rem; /* 160px */
top-40top: 10rem; /* 160px */
right-40right: 10rem; /* 160px */
bottom-40bottom: 10rem; /* 160px */
left-40left: 10rem; /* 160px */
inset-44inset: 11rem; /* 176px */
inset-x-44left: 11rem; /* 176px / right: 11rem; / 176px */
inset-y-44top: 11rem; /* 176px / bottom: 11rem; / 176px */
start-44inset-inline-start: 11rem; /* 176px */
end-44inset-inline-end: 11rem; /* 176px */
top-44top: 11rem; /* 176px */
right-44right: 11rem; /* 176px */
bottom-44bottom: 11rem; /* 176px */
left-44left: 11rem; /* 176px */
inset-48inset: 12rem; /* 192px */
inset-x-48left: 12rem; /* 192px / right: 12rem; / 192px */
inset-y-48top: 12rem; /* 192px / bottom: 12rem; / 192px */
start-48inset-inline-start: 12rem; /* 192px */
end-48inset-inline-end: 12rem; /* 192px */
top-48top: 12rem; /* 192px */
right-48right: 12rem; /* 192px */
bottom-48bottom: 12rem; /* 192px */
left-48left: 12rem; /* 192px */
inset-52inset: 13rem; /* 208px */
inset-x-52left: 13rem; /* 208px / right: 13rem; / 208px */
inset-y-52top: 13rem; /* 208px / bottom: 13rem; / 208px */
start-52inset-inline-start: 13rem; /* 208px */
end-52inset-inline-end: 13rem; /* 208px */
top-52top: 13rem; /* 208px */
right-52right: 13rem; /* 208px */
bottom-52bottom: 13rem; /* 208px */
left-52left: 13rem; /* 208px */
inset-56inset: 14rem; /* 224px */
inset-x-56left: 14rem; /* 224px / right: 14rem; / 224px */
inset-y-56top: 14rem; /* 224px / bottom: 14rem; / 224px */
start-56inset-inline-start: 14rem; /* 224px */
end-56inset-inline-end: 14rem; /* 224px */
top-56top: 14rem; /* 224px */
right-56right: 14rem; /* 224px */
bottom-56bottom: 14rem; /* 224px */
left-56left: 14rem; /* 224px */
inset-60inset: 15rem; /* 240px */
inset-x-60left: 15rem; /* 240px / right: 15rem; / 240px */
inset-y-60top: 15rem; /* 240px / bottom: 15rem; / 240px */
start-60inset-inline-start: 15rem; /* 240px */
end-60inset-inline-end: 15rem; /* 240px */
top-60top: 15rem; /* 240px */
right-60right: 15rem; /* 240px */
bottom-60bottom: 15rem; /* 240px */
left-60left: 15rem; /* 240px */
inset-64inset: 16rem; /* 256px */
inset-x-64left: 16rem; /* 256px / right: 16rem; / 256px */
inset-y-64top: 16rem; /* 256px / bottom: 16rem; / 256px */
start-64inset-inline-start: 16rem; /* 256px */
end-64inset-inline-end: 16rem; /* 256px */
top-64top: 16rem; /* 256px */
right-64right: 16rem; /* 256px */
bottom-64bottom: 16rem; /* 256px */
left-64left: 16rem; /* 256px */
inset-72inset: 18rem; /* 288px */
inset-x-72left: 18rem; /* 288px / right: 18rem; / 288px */
inset-y-72top: 18rem; /* 288px / bottom: 18rem; / 288px */
start-72inset-inline-start: 18rem; /* 288px */
end-72inset-inline-end: 18rem; /* 288px */
top-72top: 18rem; /* 288px */
right-72right: 18rem; /* 288px */
bottom-72bottom: 18rem; /* 288px */
left-72left: 18rem; /* 288px */
inset-80inset: 20rem; /* 320px */
inset-x-80left: 20rem; /* 320px / right: 20rem; / 320px */
inset-y-80top: 20rem; /* 320px / bottom: 20rem; / 320px */
start-80inset-inline-start: 20rem; /* 320px */
end-80inset-inline-end: 20rem; /* 320px */
top-80top: 20rem; /* 320px */
right-80right: 20rem; /* 320px */
bottom-80bottom: 20rem; /* 320px */
left-80left: 20rem; /* 320px */
inset-96inset: 24rem; /* 384px */
inset-x-96left: 24rem; /* 384px / right: 24rem; / 384px */
inset-y-96top: 24rem; /* 384px / bottom: 24rem; / 384px */
start-96inset-inline-start: 24rem; /* 384px */
end-96inset-inline-end: 24rem; /* 384px */
top-96top: 24rem; /* 384px */
right-96right: 24rem; /* 384px */
bottom-96bottom: 24rem; /* 384px */
left-96left: 24rem; /* 384px */
inset-autoinset: auto;
inset-1/2inset: 50%;
inset-1/3inset: 33.333333%;
inset-2/3inset: 66.666667%;
inset-1/4inset: 25%;
inset-2/4inset: 50%;
inset-3/4inset: 75%;
inset-fullinset: 100%;
inset-x-autoleft: auto; right: auto;
inset-x-1/2left: 50%; right: 50%;
inset-x-1/3left: 33.333333%; right: 33.333333%;
inset-x-2/3left: 66.666667%; right: 66.666667%;
inset-x-1/4left: 25%; right: 25%;
inset-x-2/4left: 50%; right: 50%;
inset-x-3/4left: 75%; right: 75%;
inset-x-fullleft: 100%; right: 100%;
inset-y-autotop: auto; bottom: auto;
inset-y-1/2top: 50%; bottom: 50%;
inset-y-1/3top: 33.333333%; bottom: 33.333333%;
inset-y-2/3top: 66.666667%; bottom: 66.666667%;
inset-y-1/4top: 25%; bottom: 25%;
inset-y-2/4top: 50%; bottom: 50%;
inset-y-3/4top: 75%; bottom: 75%;
inset-y-fulltop: 100%; bottom: 100%;
start-autoinset-inline-start: auto;
start-1/2inset-inline-start: 50%;
start-1/3inset-inline-start: 33.333333%;
start-2/3inset-inline-start: 66.666667%;
start-1/4inset-inline-start: 25%;
start-2/4inset-inline-start: 50%;
start-3/4inset-inline-start: 75%;
start-fullinset-inline-start: 100%;
end-autoinset-inline-end: auto;
end-1/2inset-inline-end: 50%;
end-1/3inset-inline-end: 33.333333%;
end-2/3inset-inline-end: 66.666667%;
end-1/4inset-inline-end: 25%;
end-2/4inset-inline-end: 50%;
end-3/4inset-inline-end: 75%;
end-fullinset-inline-end: 100%;
top-autotop: auto;
top-1/2top: 50%;
top-1/3top: 33.333333%;
top-2/3top: 66.666667%;
top-1/4top: 25%;
top-2/4top: 50%;
top-3/4top: 75%;
top-fulltop: 100%;
right-autoright: auto;
right-1/2right: 50%;
right-1/3right: 33.333333%;
right-2/3right: 66.666667%;
right-1/4right: 25%;
right-2/4right: 50%;
right-3/4right: 75%;
right-fullright: 100%;
bottom-autobottom: auto;
bottom-1/2bottom: 50%;
bottom-1/3bottom: 33.333333%;
bottom-2/3bottom: 66.666667%;
bottom-1/4bottom: 25%;
bottom-2/4bottom: 50%;
bottom-3/4bottom: 75%;
bottom-fullbottom: 100%;
left-autoleft: auto;
left-1/2left: 50%;
left-1/3left: 33.333333%;
left-2/3left: 66.666667%;
left-1/4left: 25%;
left-2/4left: 50%;
left-3/4left: 75%;
left-fullleft: 100%;

案例：偏移综合案例

Use the {top|right|bottom|left|inset}-{size} utilities to set the horizontal or vertical position of a positioned element.

使用’ {top|right|bottom|left|inset}-{size} '实用程序来设置[定位元素]的水平或垂直位置(https://www.tailwindcss.cn/docs/position)。

<template>
  <div class="flex gap-3">
    <!-- Pin to top left corner -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute left-0 top-0 h-16 w-16 bg-indigo-500">01</div>
    </div>

    <!-- Span top edge -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute inset-x-0 top-0 h-16 bg-indigo-500">02</div>
    </div>

    <!-- Pin to top right corner -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute top-0 right-0 h-16 w-16 bg-indigo-500">03</div>
    </div>

    <!-- Span left edge -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute inset-y-0 left-0 w-16 bg-indigo-500">04</div>
    </div>

    <!-- Fill entire parent -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute inset-0 bg-indigo-500">05</div>
    </div>

    <!-- Span right edge -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute inset-y-0 right-0 w-16 bg-indigo-500">06</div>
    </div>

    <!-- Pin to bottom left corner -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute bottom-0 left-0 h-16 w-16 bg-indigo-500">07</div>
    </div>

    <!-- Span bottom edge -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute inset-x-0 bottom-0 h-16 bg-indigo-500">08</div>
    </div>

    <!-- Pin to bottom right corner -->
    <div class="relative h-32 w-32 bg-indigo-100">
      <div class="absolute bottom-0 right-0 h-16 w-16 bg-indigo-500">09</div>
    </div>
  </div>
</template>

在这里插入图片描述

visibility 样式类

Utilities for controlling the visibility of an element.

用于控制元素可见性的实用程序。

基础样式

ClassProperties
visiblevisibility: visible;
invisiblevisibility: hidden;
collapsevisibility: collapse;

案例：隐藏元素

Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with hidden from the display documentation).

使用不可见来隐藏元素，但仍然保持其在DOM中的位置，影响其他元素的布局(与显示文档中的隐藏相比)。

vue3示例：

<template>
  <div class="grid grid-cols-3 gap-3">
    <div class="h-12 bg-indigo-500">1</div>
    <div class="h-12 bg-indigo-500 invisible">2</div>
    <div class="h-12 bg-indigo-500">3</div>
  </div>
  <hr>
  <div class="grid grid-cols-3 gap-3">
    <div class="h-12 bg-indigo-500">1</div>
    <div class="h-12 bg-indigo-500 visible">2</div>
    <div class="h-12 bg-indigo-500">3</div>
  </div>
</template>

在这里插入图片描述

z-index 样式类

Utilities for controlling the stack order of an element.

用于控制元素的堆栈顺序的实用程序。

基础样式

ClassProperties
z-0z-index: 0;
z-10z-index: 10;
z-20z-index: 20;
z-30z-index: 30;
z-40z-index: 40;
z-50z-index: 50;
z-autoz-index: auto;

标签：right,Layout,bottom,end,inset,源码,Tailwindcss,rem,inline
From： https://blog.csdn.net/qq_37703224/article/details/139401335

相关文章

  • 代驾小程序源码：包时长功能详解
    代驾源码深度揭秘：包时长功能详解随着科技的进步和社会的发展，代驾服务已经成为了我们日常生活中不可或缺的一部分。而在代驾服务中，包时长功能凭借其便捷性和经济性，赢得了广大用户的喜爱。今天，我们就来详细解析一下代驾源码中的包时长功能，看看它是如何为用户提供更优质的出行体......
  • web 项目开发又多一个选择！华为出品的跨端、跨框架的 UI 组件库，有点强（带私活源码）
     前言在华为开发者大会2023上，官方正式进行发布了OpenTiny，这是华为云出品的企业级设计体系统，一套前端UI组件库。适配PC端/移动端等多端，完成度很高。至此，web项目开发又多一个选择。OpenTiny，同时支持Vue2/Vue3/Angular，拥有主题配置系统/中后台模板/CLI命令......
  • 【python】python电影评论数据抓取分析可视化（源码+数据+课程论文）【独一无二】
    ......
  • 蓝屏绿屏黑屏？别急，有它们仨【送源码】
    使用Windows系统的电脑时，可能会碰到各种问题，导致系统无法正常使用。这些问题都有一个统一的专业叫法就是bug！系统一旦出现bug，最明显的特点就是，①电脑蓝屏电脑蓝屏是最经典的，从XP时代一直延续到最新版Windows11。②电脑黑屏电脑黑屏通常出现在最新版系统当中，目前好像又改......
  • redis zset源码
    zset底层是由hash字典和跳表实现的，字典存储member->分数的映射关系，这样根据membe查询score的时间复杂度O为1跳表可以理解为多个层级的有序链表，每个节点可能在不同层级上，通过在不同层级的跳跃查找，把查询时间复杂度降低到Olgn1.随机层数，只有0.25的概率升级层数，最多64层50%概率......
  • 基于VHDL的倒车雷达项目（免费提供全部源码）
    下载地址如下：基于VHDL的倒车雷达项目（免费提供全部源码）资源-CSDN文库1.项目介绍基于VHDL的倒车雷达项目旨在开发一种高效、可靠的倒车辅助系统，利用VHDL（VHSICHardwareDescriptionLanguage）语言实现雷达的核心逻辑控制。该项目的背景源于车辆安全性需求的不断提升，尤其是在停......
  • 基于SpringBoot+Mybatis+Redis的问答社交网站项目（免费提供全部源码）
    下载地址如下：基于SpringBoot+Mybatis+Redis的问答社交网站项目（免费提供全部源码）资源-CSDN文库项目介绍项目背景随着互联网的普及和社交媒体的快速发展，用户对于在线交流和信息分享的需求不断增加。问答社交网站作为一种新型的社交平台，为用户提供了一个交流知识、解决问题和......
  • 基于Nagao的统计词频项目（免费提供全部源码）
    下载地址如下：基于Nagao的统计词频项目（免费提供全部源码）资源-CSDN文库项目介绍背景与起源在当今信息爆炸的时代，文本数据的增长速度前所未有。无论是社交媒体上的帖子、新闻文章，还是学术论文，文本数据的数量和多样性都在不断增加。如何有效地分析这些文本数据，提取有价值的信息，......
  • 【跌倒检测】HMM+SVM形状特征跌倒检测 （含准确率）【含Matlab源码 4624期】
    ✅博主简介：热爱科研的Matlab仿真开发者，修心和技术同步精进，Matlab项目合作可私信。......
  • Springboot计算机毕业设计疫情社区报备小程序【附源码】开题+论文+mysql+程序+部署
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着新冠疫情的全球蔓延，社区成为疫情防控的第一道防线。传统的人工报备方式不仅效率低下，而且难以实时追踪居民的流动情况，给疫情防控带来了极大的挑战......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99