库洛新人TJY入职笔记

明/暗主题

间距与尺寸 ​

本篇介绍元素边距、内部填充以及元素基础宽高设定的常用类。

Padding 与 Margin ​

控制容器外部距离 margin 以及容器内部填充 padding。由代表方向的前缀以及数字共同构成。

类名效果说明
p-6设置四周均等的内边距
px-8设置水平方向（左右）内边距
py-2设置垂直方向（上下）内边距
m-4设置四周均等的外边距
ml-2单独设置左侧外部间距
html
<div class="m-4 p-6 bg-purple-100 border border-purple-300 text-slate-900">
  <div class="px-8 py-2 bg-purple-200 ml-2 mt-4 inline-block text-slate-900">
    容器内边距 X轴8 Y轴2，外边距 左侧2 顶部4
  </div>
</div>
容器内边距 X轴8 Y轴2，外边距 左侧2 顶部4

元素间距 (Space Between) ​

针对一组子元素之间的留白，可以在父容器上统一进行设置。

类名效果说明
space-x-4为所有子元素的水平间隔设定距离
space-y-4为所有子元素的垂直间隔设定距离
html
<div class="flex flex-wrap space-x-12 space-y-5 bg-gray-50 p-4 text-slate-900">
    <img class="h-40 w-40 object-cover" src="/assets/samples/OgrhevbtvttdAsd.webp"/>
    <img class="h-40 w-40 object-cover" src="/assets/samples/LmdJStbtvttdzyz.webp"/>
    <img class="h-40 w-40 object-cover" src="/assets/samples/XnTgTdbtvttdBku.webp"/>
    <img class="h-40 w-40 object-cover" src="/assets/samples/ALzNHhbtvttdzzB.webp"/>
    <img class="h-40 w-40 object-cover" src="/assets/samples/fIVeonbtvttdyAB.webp"/>
    <img class="h-40 w-40 object-cover" src="/assets/samples/UHsbvGbtvttdAqF.webp"/>
</div>

Width 与 Height ​

控制容器的整体宽度与高度。可以使用固定尺寸或百分比值。

类名效果说明
w-full宽度占据父容器的百分之百
w-1/2宽度占据父容器的二分之一
w-64设定固定的宽度（对应 16rem）
h-16设定固定的高度（对应 4rem）
h-screen高度填满整个设备视口
overflow-auto容器缩小时自动提供滚动观察
html
  <div class="w-full bg-blue-50 p-2 mb-2 text-slate-900">完全宽度</div>
  <div class="w-1/2 bg-blue-100 p-2 mb-2 text-slate-900">一半宽度</div>
  <div class="w-64 h-16 bg-blue-200 p-2 text-slate-900">固定宽度 64 与高度 16</div>

完全宽度
一半宽度
固定宽度 64 与高度 16

Min 与 Max Sizing ​

限制元素尺寸在缩放时能达到的最大与最小界限。

类名效果说明
max-w-md规定能达到的最大中等固定宽度
min-h-[数值]也可以使用方括号填入具体的自定义最小值
mx-auto在父容器内水平居中
html
<div id="tw-limit-wrap" class="rounded-lg border border-green-200 p-3 dark:border-green-700" style="width: 780px; max-width: 100%;">
  <div class="max-w-md mx-auto bg-green-100 p-4 text-slate-900">
    这个块使用 max-w-md 与 mx-auto
  </div>
  <div class="mt-4 bg-green-200 p-4 text-slate-900 min-h-25">
    内容较少时依然保持最小高度
  </div>
</div>
这个块使用 max-w-md 与 mx-auto
内容较少时依然保持最小高度