你可能会说
帮我排一下页面布局:导航在上、侧边栏在左、内容居中。
页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。
页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。好的布局让人一眼就知道在哪、看什么。
生活类比
像房间装修的平面规划图——沙发放哪、电视放哪、过道留多宽,都要提前设计。
🎮 动手试试
关于「布局」,以下哪个描述最准确?
你可以这样告诉 AI
帮我搭一个后台布局:左侧 240px 侧边栏、右侧内容自适应、顶部导航固定,用 CSS Grid 实现。
布局决定元素放在页面的哪个位置,视觉层级决定同一区域内元素的主次阅读顺序。
搭建页面骨架结构
新页面需要确定导航、侧边栏、内容区、页脚等区域的位置关系时,用布局设计规划空间分配,确保结构清晰一致。
和 AI 协作时
想让 AI 搭布局时,说「左导航 240px、中内容自适应、右 300px 三栏布局」,AI 会用 Flex/Grid 实现。
简单单页无导航
只有一个表单或一段文案的单页,不需要复杂的布局设计——居中放内容就足够,过度布局反而增加代码量。
与纯数据处理流程无关
数据处理、ETL 管道、批处理脚本等后端逻辑不涉及页面展示,布局概念在这里完全不适用。
页面上各个元素的位置安排——导航在上、侧边栏在左、内容在中间。好的布局让人一眼就知道在哪、看什么。
像房间装修的平面规划图——沙发放哪、电视放哪、过道留多宽,都要提前设计。
和 AI 沟通时提到「布局改成左边目录右边内容」,调整的就是 Layout。