术语库

Focus State

元素被选中、准备接收输入时的样式，比如点击输入框后边框变深，按 Tab 键时按钮外出现描边。

Disabled State

元素暂时不能操作时的样式，通常颜色变浅、鼠标显示禁止符号，点击后没有任何反应。

Form Validation

检查用户填写的内容是否符合要求，比如必填、手机号格式、密码长度，不符合时给出具体提示。

Debounce

事件连续触发时先不执行，等停下来一段时间后只执行最后一次，常用于搜索框的输入联想。

Throttle

事件连续触发时按固定时间间隔执行，比如每 200ms 最多执行一次，用于滚动、拖动等高频事件。

Undo

让用户把刚做的操作恢复回去，比如删除后在提示条里点「撤销」，或按 Ctrl+Z 回退编辑。

Confirmation Dialog

执行删除、支付等无法恢复的操作前，先弹出对话框让用户再确认一次，防止误操作。

Inline Edit

直接在显示内容的位置点击修改，不用跳转页面或打开弹窗，改完按回车或点击外面即可保存。

Bulk Action

先勾选多条数据，再一次性对它们执行删除、导出、修改状态等操作，省去一条条处理的麻烦。

Filter & Sort

筛选是按条件缩小数据范围，排序是调整数据的先后顺序，两者常一起出现在列表和表格上方。

Keyboard Shortcut

用键盘组合键直接触发操作，比如 Ctrl+S 保存、Ctrl+K 打开搜索，让熟练用户操作更快。

Sticky

元素随页面滚动到顶部边缘时固定不动，比如导航栏、表格表头、分组标题滚动时停在顶部。

Progressive Disclosure

先只展示最常用的内容和选项，更多细节或高级功能等用户需要时再展开，避免一次塞太多。

Micro-interaction

围绕一个小操作的简短反馈动画，比如点赞时红心弹一下、开关圆点滑动、复制后图标变成对勾。

Transition

元素状态变化时，让颜色、位置、大小等属性在一小段时间内平滑变化，而不是瞬间跳过去。

Autocomplete

用户输入时在输入框下方实时列出匹配的候选项，可以用鼠标或方向键选中，减少打字和输错。

Flexbox

让一组元素沿一个方向（横向或纵向）排成一排，并方便地控制对齐、间距和伸缩的 CSS 布局方式。

CSS Grid

把区域划分成由行和列组成的网格，再把元素放进格子里，适合行列都要对齐的二维布局。

Box Model

浏览器把每个元素都看成一个矩形盒子，由内到外依次是内容、内边距、边框和外边距四层。

Margin & Padding

内边距是边框以内、内容周围的空间，外边距是边框以外、这个元素和其他元素之间的距离。

Whitespace

页面上刻意留出的空白区域，用来分隔内容、突出重点，让界面看起来不拥挤、更容易阅读。

Responsive Design

同一套页面根据屏幕宽度自动调整布局，在手机、平板和电脑上都能正常浏览和操作。

Breakpoint

响应式布局里切换样式的屏幕宽度临界值，比如宽度小于 768px 时从两栏变成一栏。

Media Query

CSS 里按条件生效的样式规则，比如屏幕宽度小于 768px、系统开启深色模式时才应用某些样式。

CSS Position

用 position 属性让元素脱离正常的排列顺序，按指定偏移量摆放，常用于角标、悬浮按钮和固定导航栏。

z-index

元素重叠时决定谁显示在上面的 CSS 属性，数值越大越靠前，常用于弹窗、下拉菜单和吸顶导航。

Overflow

内容超出容器大小时的处理方式：露在外面、裁掉、出现滚动条，或者把长文字截断成省略号。

Typography

对文字的字体、字号、字重、行高、间距和颜色做整体规划，让内容清晰易读、主次分明。

Line Height

一行文字所占的高度，决定多行文字之间的疏密，正文通常设为字号的 1.5 到 1.8 倍。

Font Weight

文字笔画的粗细程度，用 100 到 900 的数值表示，400 是常规，700 是粗体，用来区分信息主次。