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（如 <span>），而 height 对内联元素无效。只有块级元素（display: block、inline-block、flex 等）才受 height 控制。
另一个干扰项是 padding/margin/border 占据空间，但工具类一般只设 height，不重置 box-sizing。若项目未全局设 box-sizing: border-box，那 h-10 的实际可视高度会小于 10 高度单位（因为边框和内边距额外增加）。
立即学习“前端免费学习笔记（深入）”；
- 检查元素 computed
display值，必要时加inline-block或block类 - 确认是否已设
box-border（Tailwind 默认启用；其他工具库需自查） - 用浏览器 DevTools 查看
height是否被其他样式覆盖（如min-height或flex父容器的拉伸）
响应式宽高控制：用断点前缀组合类名
工具类支持按屏幕尺寸切换，比如 md:w-1/2 sm:h-20 lg:h-full，这本质是媒体查询嵌套，生成对应断点下的 width/height 声明。
注意：这些类之间无优先级关系，写在后面的会覆盖前面同属性的声明（CSS 层叠规则）。例如 h-8 h-auto md:h-12 在中屏下生效 h-12，在移动屏下因 h-auto 在 h-8 后面，会覆盖掉 h-8。
- 推荐按断点从左到右排列：
sm:h-6 md:h-8 lg:h-10 - 避免混用冲突值，如
w-1/3 w-full—— 后者总会生效 - 动态高度慎用：
h-[200px]是安全的，但h-[calc(100vh-64px)]需确保工具库支持任意值插值（Tailwind v3.0+ 支持，旧版需配置）
与 Flex/Grid 布局配合时，width/height 工具类可能失效
当父容器是 display: flex，子元素默认会拉伸（align-items: stretch），此时显式设置 h-12 可能被忽略，除非加 align-self: flex-start 或设 flex-shrink: 0。
类似地，在 Grid 中，若轨道定义为 grid-template-rows: 1fr，子项的 h-20 会被拉满至 1fr 高度，而非固定 20。
- Flex 子项想固定高度：加
self-start（Tailwind）或align-self: flex-start - Grid 子项想脱离轨道约束：加
place-self: start或设height并overflow: hidden辅助验证 - 不确定布局影响时，先临时加
border类（如border）可视化边界
.card {
width: 100%;
height: 12rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.card {
width: 50%;
height: 16rem;
}
}
工具类不是魔法，它只是快捷写法。真正卡住你的，往往不是类名记错，而是没意识到 display 类型、盒模型、父容器布局这三层限制。 
