h-full height: 100%; h-screen height: 100vh; h-dvh height: 100dvh; h-dvw height: 100dvw; h-lvh height: 100lvh; h-lvw height: 100lvw; h-svh height: 100svh; h-svw height: 100svw; 这些配置的差别是什么

这些配置都是用于设置元素高度的 CSS 样式属性，它们之间的差异主要在于参考的高度单位和适用的场景：

1. h-full (height: 100%):

   • 设置元素的高度为其父元素的 100%。如果父元素的高度是明确的，这个属性将使子元素填满父元素的高度。

2. h-screen (height: 100vh):

   • 设置元素的高度为视口的 100% 高度（viewport height）。即使在滚动时，元素仍然会占据整个视口的高度。

3. h-dvh (height: 100dvh):

   • 动态视口高度（dynamic viewport height）。在某些浏览器中，视口高度会根据 UI 元素（如地址栏）的隐藏或显示而动态变化，这个单位可以更好地适应这种变化。

4. h-dvw (height: 100dvw):

   • 动态视口宽度（dynamic viewport width），类似于 dvh，但用于宽度。如果视口宽度因 UI 元素的变化而改变，使用 dvw 可以更好地适应。

5. h-lvh (height: 100lvh):

   • 大视口高度（large viewport height）。用于获取视口的最大高度，通常用于不受 UI 元素影响的高度计算。

6. h-lvw (height: 100lvw):

   • 大视口宽度（large viewport width），用于获取视口的最大宽度。

7. h-svh (height: 100svh):

   • 小视口高度（small viewport height），用于获取视口的最小高度，考虑到可能的 UI 元素（如软键盘）的出现。

8. h-svw (height: 100svw):

   • 小视口宽度（small viewport width），用于获取视口的最小宽度。

这些单位主要在响应式设计中用于处理不同设备和浏览器的变化情况，以确保页面布局能够适应不同的视口尺寸和动态变化。