width/height工具类本质是设置内联width和height样式，仅控制尺寸值，不处理溢出、换行等行为；生效需元素为块级或弹性布局，且受box-sizing、父容器布局影响。
width / height 工具类的本质是设置 width 和 height 内联样式
所谓“工具类”，就是预定义好的 CSS 类，比如 h-8、w-full，它们背后对应的是 height: 2rem 或 width: 100% 这样的声明。这类类名不会自动响应内容变化，也不会替代盒模型逻辑——它只是直接作用于元素的 width 和 height 属性。
常见误区是以为加了 w-1/2 就能“撑开父容器”或“自适应文字长度”，其实它只管设置宽度值，不处理溢出、换行、最小尺寸等行为。
-
w-16→width: 4rem（Tailwind 默认 1rem = 16px） -
h-screen→height: 100vh -
w-auto→width: auto（让内容决定宽度） -
h-px→height: 1px（常用于分割线）
为什么设置了 h-10 元素却没显示预期高度？
最常见原因是元素默认为 display: inline（如 ），而 height 对内联元素无效。只有块级元素（display: block、inline-block、flex 等）才受 height 控制。
另一个干扰项是 padding/margin/border 占据空间，但工具类一般只设 height，不重置 box-sizing。若项目未全局设 box-sizing: border-box，那 h-10 的实际可视高度会小于 10 高度单位（因为边框和内边距额外增加）。
立即学习“前端免费学习笔记（深入）”；
