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

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-after-column 修饰的元素之后开始断开,切换到新的列。

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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/673517.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

k8s学习--ConfigMap详细解释与应用

文章目录 一 什么是configmapConfigMap 的好处ConfigMap 的限制 二.创建ConfigMap的4种方式1.在命令行指定参数创建2.在命令行通过多个文件创建3.在命令行通过文件提供多个键值对创建4.YAML资源清单文件创建 三 configmap的两种使用方法1.通过环境变量的方式传递给pod2.通过vol…

Java(十二)---认识异常

文章目录 前言1. 异常的概念与体系结构1.1.异常的概念1.异常的体系1.3 异常的分类 2. 异常的处理2.1 防御式编程2.2 异常的抛出2.3 异常的捕获2.3.1 异常声明throws2.3.2 try-catch捕获并处理2.3.3 finally 2.4 异常的处理流程 3. 自定义异常类 前言 这一篇就是咱们学习JavaSE…

学习笔记——网络参考模型——TCP/IP模型(传输层)

四、TCP/IP模型-传输层 一、TCP 1、TCP定义 TCP(Transmission Control Protocol&#xff0c;传输控制协议)∶为应用程序提供可靠的面向连接的通信服务。目前&#xff0c;许多流行的应用程序都使用TCP。 连接&#xff1a;正式发送数据之前&#xff0c;提前建立好一种虚拟的&…

String常用操作

String常用方法 构造字符串 常用的构造字符串有3种&#xff1a; 1.直接赋值String s "abcd"; 2.实例化调用构造方法String s new String("abcd"); 3.实例化传字符数组 char[] ch {a,b,c,d}; String s new String(ch);字符串比较 比较 比较的是两个…

40.8K开源交流社区平台:Discourse

Discourse&#xff1a; 开放源代码&#xff0c;打造社区讨论的自由家园- 精选真开源&#xff0c;释放新价值。 概览 Discourse是一个完全开源的社区平台&#xff0c;为那些希望完全控制自己网站运行方式和地点的组织和个人提供服务。经过十多年的实战考验&#xff0c;Discours…

索引 ---- mysql

目录 1. 索引 1.1 概念 1.2 作用 1.3 使用场景 1.4 使用 1.4.1查看索引 1.4.2 创建索引 1.4.3 删除索引 1.5 注意事项 1.6 索引底层的数据结构 (面试经典问题) 1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的…

数据库(18)——DCL权限控制

MySQL常用权限 权限说明ALL,ALL PRIVILEGES所有权限SELECT查询数据INSERT插入数据UPDATE修改数据DELETE删除数据ALTER修改表DROP删除数据库/表/视图CREATE创建数据库/表 DCL语法 查询权限 SHOW GRANTS FOR 用户名主机名; 查询hello的权限 SHOW GRANTS FOR hellolocalhost; 授…

方法重写

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 基类的成员都会被派生类继承&#xff0c;当基类中的某个方法不完全适用于派生类时&#xff0c;就需要在派生类中重写父类的这个方法&#xff0c;这和…

pycharm链接auto al服务器

研0提前进组&#xff0c;最近阻力需求是把一个大模型复现&#xff0c;笔者电脑18年老机子&#xff0c;无法满足相应的需求。因此租用auto dl服务器。本文记录自己使用pycharm&#xff08;专业版&#xff09;链接auto dl期间踩过的坑。 1.下载pycharm专业版 这一步不解释了&am…

ESP32 WSL环境搭建

克隆代码 代码链接&#xff1a;https://gitee.com/EspressifSystems/esp-idf 克隆代码&#xff1a; git clone https://gitee.com/EspressifSystems/esp-idf 安装环境 cd esp32 /usr/bin/python3 ./esp-idf/tools/idf_tools.py 这里可能需要安装比较久&#xff0c; 有些需要…

基于51单片机的俄罗斯方块

一.硬件方案 本设计采用STC89C52RC单片机作为系统的芯片&#xff0c;实现人机交互、娱乐等功能。选用LCD12864实现俄罗斯方块游戏界面、图形显示&#xff1b;选用独立按键实现游戏控制。本设计实现的基本功能是&#xff1a;用按键控制目标方块的变换与移动&#xff1b;消除一行…

Java 多线程创建:三种主要方法

多线程编程是Java中一个重要的技术点&#xff0c;它允许程序并行执行多个任务&#xff0c;从而提高程序的执行效率。本文将详细介绍在Java中创建多线程的三种主要方法&#xff1a;继承Thread类、实现Runnable接口以及使用Callable和Future接口。 1. 继承 Thread 类 继承Threa…

python_将二维列表转换成HTML格式_邮件相关

python_将二维列表转换成HTML_邮件相关 data[["理想","2"],["理想2","3"]]def list_to_html_table(data):"""将二维列表转换为HTML表格格式的字符串。参数:data -- 二维列表&#xff0c;表示表格的数据。返回:一个字符…

最新国内AI工具(ChatGPT4.0、GPTs、AI绘画、文档分析使用教程)

如何利用AI提高内容生产效率&#xff1f; AI&#xff08;人工智能&#xff09;正以惊人的速度改变我们的生活方式&#xff0c;尤其是在内容生产领域。作为一名创作者&#xff0c;你可能会发现自己在面对海量信息时无从下手&#xff0c;或者在紧迫的截止日期前感觉力不从心。这时…

汽车数据应用构想(二)

一直说数据价值场景&#xff0c;啥叫有价值&#xff1f;啥样的场景有价值&#xff1f;按互联网的价值观来看&#xff0c;用户的高频需求就是价值。用户也许不会付费&#xff0c;但只要他天天用&#xff0c;那就是流量&#xff0c;就是用户黏性&#xff0c;就是价值&#xff01;…

【Qt】对话框

文章目录 1 :peach:对话框介绍:peach:2 :peach:对话框的分类:peach:2.1 :apple:模态对话框:apple:2.2 :apple:非模态对话框:apple:2.3 :apple:混合属性对话框:apple: 3 :peach:Qt 内置对话框:peach:3.1 :apple:消息对话框 QMessageBox:apple: 1 &#x1f351;对话框介绍&#x…

【一刷《剑指Offer》】面试题 29:数组中出现次数超过一半的数字

力扣对应题目链接&#xff1a;169. 多数元素 - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;数组中出现次数超过一半的数字_牛客题霸_牛客网 (nowcoder.com) 核心考点 &#xff1a; 数组使用&#xff0c;简单算法的设计。 一、《剑指Offer》对应内容 二…

计算机网络学习实践:模拟PPP协议验证虚拟局域网(VLAN)

计算机网络实践&#xff1a;模拟PPP协议&&验证虚拟局域网&#xff08;VLAN&#xff09; 挺有意思的大家可以跟着做一做&#xff0c;我是跟着韩志刚老师的视频做的 https://www.bilibili.com/video/BV1Qr4y1N7cH?p31&vd_source7831c5b97cfc5c745eb48ff04f6515e7 …

GCB | 基于36年5个生态系统观测数据发现表层土壤深度提高生态系统的生产力和稳定性

陆地生态系统生产力对全球粮食安全和促进碳固存至关重要&#xff0c;但生产力受到气候变化以及火灾、干旱、洪水、霜冻频率增加和生物多样性减少的压力。了解控制生态系统初级生产力变异的不同因素和机制&#xff0c;为维持生态系统初级生产力和增强生态系统恢复力提供了科学依…

文件系统和日志分析

文件系统 概述 文件是存储在硬盘上的。硬盘上的最小存储单位是扇区&#xff0c;每个扇区的大小是512字节。 inode号&#xff1a;又叫索引号&#xff0c;保存的是元信息&#xff08;主要有文件的属性 &#xff1a;包括权限&#xff0c;创建者&#xff0c;创建日期等&#xff…