w-full 和 h-screen 易用错：w-full 等价 width: 100%，依赖父容器宽度，非视口宽；h-screen 等价 height: 100vh，固定为初始视口高，不随滚动变化；应按场景选 min-h-screen、flex-1 或 w-screen 等更精准类。
w-full：宽度占满父容器，不是视口
它等价于 width: 100%，只对有明确宽度的父元素生效。
- 如果父元素是
div默认块级，且未设宽高，w-full通常能正常展开； - 但如果父元素是
flex或grid子项，默认不设宽，此时w-full可能“无效”——需给父项加flex-1或min-w-0配合； - 在浮动（
float）或绝对定位（absolute）上下文中，w-full仍按父容器计算，不是浏览器窗口宽度。
h-screen：高度等于当前视口，不随滚动变化
它等价于 height: 100vh，即初始化时取浏览器可视区域高度。
- 页面有滚动条时，超出部分不会被
h-screen覆盖，内容溢出后会自然滚动； - 嵌套使用要小心：子元素若也设
h-screen，并不会“再占一屏”，而是按自身所在容器（可能是父元素已缩窄的区域）计算； - 想让某区块“至少一屏高”，且内容多时能自动撑开，应改用
min-h-screen。
常见组合写法与避坑建议
- 全屏背景容器：
<div class="min-h-screen bg-gray-50">...</div>（推荐，兼顾内容少/多场景）； - 固定高度导航栏：
<nav class="h-16 fixed top-0 w-full z-50"></nav>（w-full此处生效，因fixed元素父级是视口）； - Flex 布局中让子项占满剩余高度：
<div class="flex flex-col h-screen"> <header class="h-14"></header><main class="flex-1 overflow-y-auto"></main> </div>（注意这里不用h-screen给main，而用flex-1）； - 避免误用：
<div class="h-screen w-full"><div class="h-screen"></div></div>→ 内层h-screen实际高度 = 外层容器高度（可能远小于视口），容易白屏。
替代方案：按需选更精准的类
- 要“宽度撑满可用空间”（尤其 Flex/Grid 中）：优先试
flex-1或grow； - 要“高度至少一整屏，内容多时可扩展”：用
min-h-screen； - 要“宽度等于整个浏览器窗口”（无视父容器）：用
w-screen（等价100vw）； - 要限制最大宽度防过宽：配合
max-w-4xl mx-auto等居中约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
