空状态需包含状态说明、原因提示、可操作入口三要素，用语通俗，交互可聚焦，CSS控制动效与响应式，SSR需预渲染HTML，状态判断须细化而非仅依赖布尔值。
空状态不是“页面没内容”，而是用户预期有内容但系统无法提供时的明确反馈。直接丢个灰色图标加“暂无数据”是无效设计，关键在告诉用户「现在什么情况」「接下来能做什么」。
空状态必须包含三个要素：状态说明 + 原因提示 + 可操作入口
比如搜索结果为空，不能只写“没有找到”，要说明是「搜索词无匹配」还是「网络异常导致未加载」；如果是权限限制，则需明确提示「你没有查看该列表的权限」。可操作入口不一定是按钮——可以是
链接跳转设置页，也可以是
触发重试，甚至是一个带
的图标。常见错误是把空状态做成纯静态文案，用户看完只能刷新或关掉页面。
状态说明用简短主标题（
或
），不超过 8 个字
原因提示用普通段落（
），避免技术术语，如不说「HTTP 404」而说「这个页面可能已被移除」
操作入口必须可聚焦、可键盘触发，禁用
模拟按钮
用 CSS 控制空状态的可见性与过渡，别靠 JS 切换 class
空状态是否显示，应由数据逻辑决定，但它的入场动效和响应式表现得交给 CSS。常见做法是给容器加
类，再用
或兄弟选择器联动控制。例如：
这样既避免 JS 频繁操作 DOM，又能让空状态随父容器自然响应高度变化。注意：IE 不支持
，若需兼容，改用 JS 设置
属性再用属性选择器。
立即学习
“
前端免费学习笔记（深入）
”；
图标、文字、间距必须统一尺寸系统
空状态里的图标不是装饰，是视觉锚点。它和文字的行高、上下边距、字体大小必须严格对齐。推荐用
或
单位建立比例关系：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
图标尺寸设为
（即 40px）
主标题字号
（18px），行高
图标与主标题间距
（12px）
主标题与说明文字间距
（8px）
混用
和
会导致缩放时错位；用
布局时别忘了设
，否则图标和文字容易垂直偏移。
服务端渲染场景下，空状态 HTML 必须提前输出
如果页面由 SSR（如 Next.js、Nuxt）生成，空状态结构不能等 JS 加载完才插入。否则首屏会闪出空白或骨架屏，再跳成空状态，体验断裂。正确做法是在模板中直接写好空状态 HTML，并用条件注释或服务端变量控制显隐：
客户端 JS 只负责绑定事件和微调动效，不负责生成结构。漏掉这点，SEO 和首屏性能都会受损。
空状态最难的不是画图标或写文案，是判断「此刻到底该显示哪个空状态」——同一个列表，在加载中、加载失败、权限不足、数据为空、搜索无果时，应该展示完全不同的内容。这需要后端返回足够细的状态码，前端按码映射，而不是全堆在一个
布尔值上。
buttononclickdiv onclickempty-state:has().list-container:has(> .empty-state) {
min-height: 200px;
}
.empty-state {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s;
}
.list-container:not(:has(> .empty-state)) .empty-state {
display: none;
}
.list-container:has(> .empty-state) .empty-state {
opacity: 1;
transform: translateY(0);
}:has()data-emptyemrem2.5rem1.125rem1.40.75rem0.5rempxremflexalign-items: center
暂无订单
你还没有创建任何订单
isEmpty