# 面板

## 什么是面板

由[自由布局](/zh-cn/layout?id=%e8%87%aa%e7%94%b1%e5%b8%83%e5%b1%80)和[均匀布局](/zh-cn/layout?id=%e5%9d%87%e5%8c%80%e5%b8%83%e5%b1%80)最终生成的栅格布局，PoPo将其中的布局单元称为面板 `Panel`，并自动生成由`1`开始的阿拉伯数字递增`id`，是面板的默认标识，另外也可以在配置项中定义[`alias`](/zh-cn/option_layout?id=alias)，设置面板的别名。

> 启用调试配置即可看到每个面板的`id`，也可以通过实例的`get`方法获取面板的详细信息(含`id`)

![panel_id](../_images/id.png)

## 面板布局

!> 对于内容元素较多的复杂页面，[栅格布局](/zh-cn/layout)通常用于快速划分页面的功能区域，内容布局则推荐使用面板布局方式。

面板布局是快速构建内容布局的捷径，PoPo 使用了经典的圣杯布局方式，将一个面板划分为头部 head、左侧 left、中间 center、右侧 right、底部 foot 五大区域，并可随意组合配置，基本可满足一个内容区域的布局需求。

如果在PoPo实例初始化选项中配置了面板布局，在栅格系统完成面板初始化后将加载面板布局。

一个典型的面板布局示意图：

![Panel layout](../_images/panel_layout.png)

PoPo在面板布局中引入了`gutter`参数，用于定义相邻面板的间隔，它实际是定义中间区域的`margin`值，默认值为`0`，无间隔。