练习 / ui

前端 练习

前端 的全部练习都来自可随时对照的主题。

82项练习 离线运行
ui 填空 新题 哪个逻辑 CSS 属性通常能让较长的 Flex 项目收缩到自动最小宽度以下? 填空 进阶 1分钟 · 来自 checkpoint-1 ui 测验 新题 哪种职责划分符合浏览器平台的工作方式? 测验 入门 1分钟 · 来自 checkpoint-1 ui 填空 新题 写出能够为 Grid 轨道同时指定最小尺寸和最大尺寸的 CSS 函数名 填空 进阶 1分钟 · 来自 checkpoint-1 ui 测验 新题 卡片应根据可复用面板的宽度调整,而不是根据整个视口调整。哪种机制最符合这一约定? 测验 高级 1分钟 · 来自 checkpoint-1 ui 测验 新题 Flexbox 容器使用 `flex-direction: column` 时,`justify-content` 沿哪条轴分配剩余空间? 测验 入门 1分钟 · 来自 checkpoint-1 ui 填空 新题 写出让 CSS 视口单位和媒体查询采用设备宽度布局视口的 meta 元素 `name` 值。只填写该值 填空 高级 1分钟 · 来自 checkpoint-1 ui 测验 新题 哪种布局问题最适合使用 CSS Grid,而不是 Flexbox? 测验 进阶 1分钟 · 来自 checkpoint-1 ui 填空 新题 写出用于触发当前页面内操作的语义化 HTML 元素,并包含尖括号 填空 入门 1分钟 · 来自 checkpoint-1 ui 填空 新题 写出用于为偏好减少动态效果的用户削弱或移除非必要动效的媒体特性 填空 进阶 1分钟 · 来自 checkpoint-2 ui 测验 新题 实现无障碍的“保存”操作时,哪种控件是合理起点? 测验 入门 1分钟 · 来自 checkpoint-2 ui 填空 新题 现代 Sass 使用哪个指令以命名空间成员加载模块,并取代旧式 `@import`? 填空 进阶 1分钟 · 来自 checkpoint-2 ui 测验 新题 页面中存在 Tailwind 类 `md:grid-cols-3`。在默认的移动优先响应式模型下,它何时生效? 测验 高级 1分钟 · 来自 checkpoint-2 ui 测验 新题 即使浏览器已经执行原生 HTML 与 JavaScript 验证,服务器为什么仍必须验证表单? 测验 入门 1分钟 · 来自 checkpoint-2 ui 填空 新题 写出在不提交表单的情况下检查当前 HTML 约束有效性的 JavaScript 方法名 填空 高级 1分钟 · 来自 checkpoint-2 ui 测验 新题 哪些属性通常是实现流畅 CSS 动效的首选,因为它们不会改变文档布局? 测验 进阶 1分钟 · 来自 checkpoint-2 ui 填空 新题 写出把表单控件与另一个错误说明元素关联起来的属性名 填空 入门 1分钟 · 来自 checkpoint-2 ui 填空 新题 写出 Storybook 中在故事渲染后执行交互的故事函数名 填空 进阶 1分钟 · 来自 checkpoint-3 ui 测验 新题 选择运行时 CSS-in-JS 库时,必须评估哪项问题? 测验 入门 1分钟 · 来自 checkpoint-3 ui 填空 新题 Vitest 单元测试需要类似浏览器的 DOM API、但不启动真实浏览器时,通常选择哪个环境? 填空 进阶 1分钟 · 来自 checkpoint-3 ui 测验 新题 对于可见的“Submit order”按钮,哪种 Playwright 定位方式最稳健? 测验 高级 1分钟 · 来自 checkpoint-3 ui 测验 新题 组件故事中的 Storybook `args` 主要用于什么? 测验 入门 1分钟 · 来自 checkpoint-3 ui 测验 新题 某个 Playwright 断言因异步请求后才出现内容而偶发失败。哪种修复方式最能保留测试约定? 测验 高级 1分钟 · 来自 checkpoint-3 ui 测验 新题 哪种测试分工既能快速定位问题,又不牺牲对关键结账流程的信心? 测验 进阶 1分钟 · 来自 checkpoint-3 ui 填空 新题 写出在构建阶段把 CSS-in-JS 声明转换为 CSS 文件、而不是在浏览器中生成样式的方式 填空 入门 1分钟 · 来自 checkpoint-3 ui 填空 新题 写出 `package.json` 中用于告知打包器导入文件是否可能产生可观察副作用的字段名 填空 进阶 1分钟 · 来自 checkpoint-4 ui 测验 新题 Vite 为什么不必在每次开发改动后先重新构建一个完整的大型应用包? 测验 入门 1分钟 · 来自 checkpoint-4 ui 填空 新题 写出响应式图片中列出多个候选资源及其宽度或像素密度描述符的属性名 填空 进阶 1分钟 · 来自 checkpoint-4 ui 测验 新题 首图在手机上需要方形裁剪,在桌面端需要宽幅裁剪。哪种标记能够表达这种艺术指导需求? 测验 高级 1分钟 · 来自 checkpoint-4 ui 测验 新题 哪种 JavaScript 语法会建立异步模块边界,供打包器用于代码分割? 测验 入门 1分钟 · 来自 checkpoint-4 ui 测验 新题 商品图片加载时页面发生跳动。哪种范围最小的修复最直接改善相关 Web Vital? 测验 高级 1分钟 · 来自 checkpoint-4 ui 测验 新题 为什么 ES 模块通常比 CommonJS 模块更容易进行 Tree Shaking? 测验 进阶 1分钟 · 来自 checkpoint-4 ui 填空 新题 写出 Vite 应用代码读取已公开环境变量时使用的对象 填空 入门 1分钟 · 来自 checkpoint-4 ui 测验 新题 哪种场景更适合直接使用 CSS 关键帧动画,而不是过渡? 用过渡和关键帧表达界面状态变化,并正确处理时间线、填充模式、渲染成本与减少动态效果偏好。 入门 1分钟 · 来自 CSS 动画 ui 测验 新题 动画结束后,animation-fill-mode: forwards 保证了什么? 用过渡和关键帧表达界面状态变化,并正确处理时间线、填充模式、渲染成本与减少动态效果偏好。 进阶 1分钟 · 来自 CSS 动画 ui 预测输出 新题 这个页面会在浏览器中输出什么? 用过渡和关键帧表达界面状态变化,并正确处理时间线、填充模式、渲染成本与减少动态效果偏好。 进阶 2分钟 · 来自 CSS 动画 ui 审查 AI 代码 新题 审查生成的购物车面板 用过渡和关键帧表达界面状态变化,并正确处理时间线、填充模式、渲染成本与减少动态效果偏好。 高级 6分钟 · 来自 CSS 动画 ui 找出 bug 新题 找出菜单动画里的 bug 用过渡和关键帧表达界面状态变化,并正确处理时间线、填充模式、渲染成本与减少动态效果偏好。 进阶 4分钟 · 来自 CSS 动画 ui 测验 新题 什么情况下 align-content 才能在 Flex 容器中明显地分配空间? 用主轴、交叉轴和弹性尺寸算法理解 Flexbox,并处理内容溢出、换行、视觉顺序与生成代码中的常见错误。 进阶 1分钟 · 来自 CSS 弹性盒布局 ui 测验 新题 容器使用 flex-direction: column。主轴存在剩余空间时,哪个属性会让项目沿这条纵向主轴居中? 用主轴、交叉轴和弹性尺寸算法理解 Flexbox,并处理内容溢出、换行、视觉顺序与生成代码中的常见错误。 入门 1分钟 · 来自 CSS 弹性盒布局 ui 预测输出 新题 这个页面会在浏览器中输出什么? 用主轴、交叉轴和弹性尺寸算法理解 Flexbox,并处理内容溢出、换行、视觉顺序与生成代码中的常见错误。 入门 2分钟 · 来自 CSS 弹性盒布局 ui 审查 AI 代码 新题 审查生成的结账操作行 用主轴、交叉轴和弹性尺寸算法理解 Flexbox,并处理内容溢出、换行、视觉顺序与生成代码中的常见错误。 高级 6分钟 · 来自 CSS 弹性盒布局 ui 找出 bug 新题 找出个人资料行里的 bug 用主轴、交叉轴和弹性尺寸算法理解 Flexbox,并处理内容溢出、换行、视觉顺序与生成代码中的常见错误。 进阶 4分钟 · 来自 CSS 弹性盒布局 ui 测验 新题 grid-auto-flow: dense 用后面的交互项目回填前面的空洞时,审查重点是什么? 用轨道、网格线与自动放置理解 CSS Grid,并正确处理响应式列、内容溢出、视觉顺序和生成代码中的布局缺陷。 进阶 1分钟 · 来自 CSS 网格布局 ui 测验 新题 一个 700px 网格使用 200px 1fr 2fr,并在相邻列间设置 20px 间隔。弹性空间怎样分配? 用轨道、网格线与自动放置理解 CSS Grid,并正确处理响应式列、内容溢出、视觉顺序和生成代码中的布局缺陷。 进阶 1分钟 · 来自 CSS 网格布局 ui 预测输出 新题 这个页面会在浏览器中输出什么? 用轨道、网格线与自动放置理解 CSS Grid,并正确处理响应式列、内容溢出、视觉顺序和生成代码中的布局缺陷。 入门 2分钟 · 来自 CSS 网格布局 ui 审查 AI 代码 新题 审查生成的商品目录网格 用轨道、网格线与自动放置理解 CSS Grid,并正确处理响应式列、内容溢出、视觉顺序和生成代码中的布局缺陷。 高级 6分钟 · 来自 CSS 网格布局 ui 找出 bug 新题 找出移动端网格里的 bug 用轨道、网格线与自动放置理解 CSS Grid,并正确处理响应式列、内容溢出、视觉顺序和生成代码中的布局缺陷。 进阶 4分钟 · 来自 CSS 网格布局 ui 测验 新题 拖动手柄会在每次指针事件中得到新的 x 坐标。哪种样式结构最能避免为每个坐标生成类名? 解释运行时与构建时 CSS-in-JS 的工作模型,以及如何处理变体、动态值、层叠和服务端渲染。 进阶 1分钟 · 来自 CSS-in-JS ui 预测输出 新题 这个有限变体选择器会输出什么? 解释运行时与构建时 CSS-in-JS 的工作模型,以及如何处理变体、动态值、层叠和服务端渲染。 入门 2分钟 · 来自 CSS-in-JS ui 审查 AI 代码 新题 审查生成的状态卡片 解释运行时与构建时 CSS-in-JS 的工作模型,以及如何处理变体、动态值、层叠和服务端渲染。 高级 6分钟 · 来自 CSS-in-JS ui 测验 新题 下列哪项准确区分了运行时 CSS-in-JS 与构建时提取? 解释运行时与构建时 CSS-in-JS 的工作模型,以及如何处理变体、动态值、层叠和服务端渲染。 入门 1分钟 · 来自 CSS-in-JS ui 找出 bug 新题 找出组件包装器里的 bug 解释运行时与构建时 CSS-in-JS 的工作模型,以及如何处理变体、动态值、层叠和服务端渲染。 进阶 4分钟 · 来自 CSS-in-JS ui 测验 新题 哪个接口最适合模拟提交按钮激活,并保留约束验证? 用原生 HTML 约束、可访问错误提示和服务器端复验构建可靠的表单验证,并正确处理跨字段规则与异步竞态。 进阶 1分钟 · 来自 表单验证 ui 预测输出 新题 这个页面会在浏览器中输出什么? 用原生 HTML 约束、可访问错误提示和服务器端复验构建可靠的表单验证,并正确处理跨字段规则与异步竞态。 入门 2分钟 · 来自 表单验证 ui 审查 AI 代码 新题 审查生成的用户名表单 用原生 HTML 约束、可访问错误提示和服务器端复验构建可靠的表单验证,并正确处理跨字段规则与异步竞态。 高级 12分钟 · 来自 表单验证 ui 测验 新题 数据已经通过浏览器约束验证,为什么服务器仍须验证? 用原生 HTML 约束、可访问错误提示和服务器端复验构建可靠的表单验证,并正确处理跨字段规则与异步竞态。 入门 1分钟 · 来自 表单验证 ui 找出 bug 新题 找出密码确认里的 bug 用原生 HTML 约束、可访问错误提示和服务器端复验构建可靠的表单验证,并正确处理跨字段规则与异步竞态。 进阶 4分钟 · 来自 表单验证 ui 测验 新题 JavaScript 没有运行时,哪种实现仍保留原生导航能力? 从浏览器的执行模型出发,掌握 HTML、CSS 与 JavaScript 的职责边界,并建立可运行、可访问、可调试的前端开发流程。 入门 1分钟 · 来自 前端开发基础 ui 测验 新题 开发者工具中一条匹配的 CSS 声明被划掉了,首先应检查什么? 从浏览器的执行模型出发,掌握 HTML、CSS 与 JavaScript 的职责边界,并建立可运行、可访问、可调试的前端开发流程。 入门 1分钟 · 来自 前端开发基础 ui 预测输出 新题 脚本触发点击后,这个页面会输出什么? 从浏览器的执行模型出发,掌握 HTML、CSS 与 JavaScript 的职责边界,并建立可运行、可访问、可调试的前端开发流程。 入门 2分钟 · 来自 前端开发基础 ui 审查 AI 代码 新题 审查生成的产品面板 从浏览器的执行模型出发,掌握 HTML、CSS 与 JavaScript 的职责边界,并建立可运行、可访问、可调试的前端开发流程。 进阶 6分钟 · 来自 前端开发基础 ui 找出 bug 新题 找出保存控件里的 bug 从浏览器的执行模型出发,掌握 HTML、CSS 与 JavaScript 的职责边界,并建立可运行、可访问、可调试的前端开发流程。 入门 4分钟 · 来自 前端开发基础 ui 测验 新题 页面列出完整发布说明,并会单独分发每一条记录。每条记录应使用哪个元素? 用元素的既定含义表达文档结构,理解地标、标题、原生控件与可访问性树,并审查生成代码中的语义错误。 入门 1分钟 · 来自 HTML 语义化元素 ui 测验 新题 怎样描述直接嵌套在 `article` 内的 `header` 最准确? 用元素的既定含义表达文档结构,理解地标、标题、原生控件与可访问性树,并审查生成代码中的语义错误。 进阶 1分钟 · 来自 HTML 语义化元素 ui 预测输出 新题 这个页面会在浏览器中输出什么? 用元素的既定含义表达文档结构,理解地标、标题、原生控件与可访问性树,并审查生成代码中的语义错误。 入门 2分钟 · 来自 HTML 语义化元素 ui 审查 AI 代码 新题 审查生成的文章索引 用元素的既定含义表达文档结构,理解地标、标题、原生控件与可访问性树,并审查生成代码中的语义错误。 高级 6分钟 · 来自 HTML 语义化元素 ui 找出 bug 新题 找出工具栏里的 bug 用元素的既定含义表达文档结构,理解地标、标题、原生控件与可访问性树,并审查生成代码中的语义错误。 进阶 4分钟 · 来自 HTML 语义化元素 ui 测验 新题 同一页中的商品卡片需要在宽主栏中横排、在窄侧栏中竖排。哪种机制能直接表达这个约束? 让页面和组件依据可用空间、用户偏好与输入能力调整布局,同时避免溢出、视觉重排和错误资源选择。 入门 1分钟 · 来自 响应式网页设计 ui 预测输出 新题 在宽度为 640px、根字号默认为 16px 的浏览器视口中,这个页面会输出什么? 让页面和组件依据可用空间、用户偏好与输入能力调整布局,同时避免溢出、视觉重排和错误资源选择。 入门 2分钟 · 来自 响应式网页设计 ui 审查 AI 代码 新题 审查生成的响应式落地页 让页面和组件依据可用空间、用户偏好与输入能力调整布局,同时避免溢出、视觉重排和错误资源选择。 高级 6分钟 · 来自 响应式网页设计 ui 测验 新题 双栏界面变成单栏时,最安全的默认做法是什么? 让页面和组件依据可用空间、用户偏好与输入能力调整布局,同时避免溢出、视觉重排和错误资源选择。 进阶 1分钟 · 来自 响应式网页设计 ui 找出 bug 新题 找出容器查询卡片里的 bug 让页面和组件依据可用空间、用户偏好与输入能力调整布局,同时避免溢出、视觉重排和错误资源选择。 进阶 4分钟 · 来自 响应式网页设计 ui 测验 新题 @use ... with 可以在什么时候配置模块? Sass 把带变量、模块和复用逻辑的 SCSS 编译为普通 CSS;理解编译边界、模块配置与选择器展开,避免生成难维护的样式。 进阶 3分钟 · 来自 Sass ui 测验 新题 用户可在页面加载后切换主题。变化的颜色值应放在哪里? Sass 把带变量、模块和复用逻辑的 SCSS 编译为普通 CSS;理解编译边界、模块配置与选择器展开,避免生成难维护的样式。 入门 3分钟 · 来自 Sass ui 预测输出 新题 这段 SCSS 会输出哪个选择器? Sass 把带变量、模块和复用逻辑的 SCSS 编译为普通 CSS;理解编译边界、模块配置与选择器展开,避免生成难维护的样式。 入门 2分钟 · 来自 Sass ui 审查 AI 代码 新题 审查生成的提醒组件 API Sass 把带变量、模块和复用逻辑的 SCSS 编译为普通 CSS;理解编译边界、模块配置与选择器展开,避免生成难维护的样式。 高级 12分钟 · 来自 Sass ui 找出 bug 新题 找出 Sass 入口里的 bug Sass 把带变量、模块和复用逻辑的 SCSS 编译为普通 CSS;理解编译边界、模块配置与选择器展开,避免生成难维护的样式。 进阶 4分钟 · 来自 Sass ui 测验 新题 哪组类名会让网格默认一列、从 md 起两列、从 xl 起四列? Tailwind CSS 4 通过可组合工具类、变体与主题变量生成静态 CSS;重点掌握源码检测、响应式规则和动态类名陷阱。 入门 2分钟 · 来自 Tailwind CSS ui 预测输出 新题 源码检测能完整看到哪些背景色候选项? Tailwind CSS 4 通过可组合工具类、变体与主题变量生成静态 CSS;重点掌握源码检测、响应式规则和动态类名陷阱。 入门 2分钟 · 来自 Tailwind CSS ui 审查 AI 代码 新题 审查生成的 Tailwind 操作按钮 Tailwind CSS 4 通过可组合工具类、变体与主题变量生成静态 CSS;重点掌握源码检测、响应式规则和动态类名陷阱。 高级 12分钟 · 来自 Tailwind CSS ui 找出 bug 新题 找出按钮焦点样式里的 bug Tailwind CSS 4 通过可组合工具类、变体与主题变量生成静态 CSS;重点掌握源码检测、响应式规则和动态类名陷阱。 进阶 3分钟 · 来自 Tailwind CSS ui 找出 bug 新题 找出 Tailwind 入口里的 bug Tailwind CSS 4 通过可组合工具类、变体与主题变量生成静态 CSS;重点掌握源码检测、响应式规则和动态类名陷阱。 入门 3分钟 · 来自 Tailwind CSS