前端设计与布局常用术语速通指南
在利用 AI 辅助开发或与设计师沟通页面效果时，准确的术语能显著提升效率。模糊的描述如'上面有点东西'往往难以转化为具体实现，而使用专业词汇则能让需求表达更精准。
一、基础结构类术语
1. 容器（Container）
容器是装内容的框，页面的一切几乎都在容器里。
- 主容器（Main container）：页面的整体包裹层。
- 内容容器（Content wrapper）：主要内容区。
- 响应式容器（Responsive container）：根据屏幕自动调整宽度。
示例描述：页面内容放在一个 1200px 宽的居中容器中。
2. 布局（Layout）
布局决定内容怎么摆放。
- 单列布局：从上到下排列。
- 多列布局：左侧栏 + 内容区，或三列分布。
- 栅格布局（Grid layout）：用网格系统排列元素。
- Flex 布局：灵活的弹性布局，常用于居中或对齐。
示例描述：用三列布局，中间内容居中，两边各占 20% 宽。
3. 侧栏 / 顶栏 / 底栏
这些是页面最常见的结构区域：
| 区域 | 英文 | 用途 |
|---|---|---|
| 顶栏 | Header / Navbar / Top bar | 标题、搜索框、头像 |
| 侧栏 | Sidebar | 导航菜单 |
| 底栏 | Footer | 版权、页脚信息 |
示例描述：顶部是固定导航栏，下面是主内容区域。
二、视觉与层次类术语
4. 卡片 / 面板（Card / Panel）
常用于展示内容块，如文章、商品、用户信息等。
- 特点：有边框或阴影，内含标题、图片、文字。
示例描述：每个商品用卡片展示，带圆角和轻微阴影。
5. 模态框 / 弹窗（Modal / Dialog）
弹出的独立层，用于提示或交互。
示例描述：点击按钮后弹出一个居中的模态框，带半透明遮罩。
6. 层级（Z-index / Layer）
控制元素的'上下关系'，决定谁在上谁在下。
示例描述：导航栏固定在顶部并始终在内容上层。
7. 阴影（Shadow）
给元素增加立体感和层次感。
- 盒子阴影（box-shadow）
- 文字阴影（text-shadow）
示例描述：给卡片加上轻微阴影，模拟浮起效果。
8. 圆角（Border-radius）
让方形元素的边角变圆润。
