尺寸

单位

1. px（像素）：

   • px 是一个绝对单位，它通常用于屏幕显示中的一个像素点。
   • 在标准显示器上，1px 通常等同于一个物理像素点，但在高分辨率屏幕（如Retina显示屏）上，一个px可能对应多个物理像素点。
   • px单位不会随着其他元素的尺寸变化而变化。

2. em：

   • em 是一个相对单位，它是相对于当前元素的font-size。
   • 如果当前元素没有显式设置font-size，则相对于其最近的父元素的font-size。
   • em可以用于设置字体大小、宽度、高度、边距等，它使得元素的尺寸能够适应其父元素的字体大小。
   • em的值是累积的，所以嵌套元素的字体大小会基于父元素的字体大小计算，这可能导致复杂的计算和不预期的结果。

3. rem（根 em）：

   • rem 是相对于根元素（即html元素）的font-size的相对单位。
   • rem是响应式设计中推荐的单位，因为你可以只改变根元素的字体大小，就可以调整整个网站的缩放比例。
   • 使用rem单位可以避免em单位的累积效应，并且使得样式更加一致和可预测。

使用场景：

• px 通常用于媒体查询和需要精确像素值的场景。
• em 用于需要基于父元素字体大小动态缩放的场景，例如制作可伸缩的布局组件。
• rem 用于大多数长度单位，尤其是当你想要整个应用或网站内元素的大小保持相对一致时。

width

1. 设置固定宽度：

   • 使用 w-{size} 工具类来设置元素的宽度，其中 {size} 是预定义的尺寸值。例如，w-24 会设置元素的宽度为 6rem（这取决于基础字号和配置）。

2. 设置百分比宽度：

   • 使用 w-{fraction} 工具类来设置元素的宽度为百分比。例如，w-1/2 会设置元素的宽度为父元素宽度的 50%。

3. 设置全宽度：

   • 使用 w-full 来设置元素的宽度与其父元素相同。
   • 使用 w-screen 来设置元素的宽度为视口宽度。

4. 最小和最大宽度：

   • 使用 min-w-{size} 和 max-w-{size} 来分别设置元素的最小和最大宽度。

5. 自适应宽度：

   • 使用 w-auto 来设置元素的宽度由其内容决定。

6. 响应式宽度：

   • 结合响应式前缀，如 sm:w-1/2，在小屏幕设备上将宽度设置为父元素的 50%。

?

1 2 3 4 5 6

居中 <div class="h-screen flex items-center justify-center">   <div class="bg-blue-500 text-white p-4 w-1/2 h-1/2 flex justify-center items-center">     居中元素   </div> </div>

　　

heigh

固定高度

• h-0 到 h-64: 提供从0到16rem的高度，步进为0.25rem。
• h-px: 设置高度为1像素。
• h-full: 设置元素高度为其父元素的100%。
• h-screen: 设置元素高度为100vh，即视口的高度。

百分比高度

• h-1/2: 设置高度为父容器高度的50%。
• h-1/3, h-2/3: 设置高度为父容器高度的33.333333% 和 66.666667%。
• h-1/4, h-2/4, h-3/4: 设置高度为父容器高度的25%，50%，75%。
• h-1/5, h-2/5, h-3/5, h-4/5: 设置高度分别为父容器高度的20%，40%，60%，80%。
• h-1/6, h-2/6, h-3/6, h-4/6, h-5/6: 设置高度为父容器高度的16.666667%，33.333333%，50%，66.666667%，83.333333%。

自适应高度

• h-auto: 设置高度自动，基于元素内容决定。

最小高度和最大高度

• min-h-0 到 min-h-full 和 min-h-screen: 设置元素的最小高度。
• max-h-full, max-h-screen: 设置元素的最大高度为父容器高度的100%或视口高