二、页面布局（01）：容器
·
视频链接：哔哩哔哩
容器的作用是通过分组和组织页面内容，实现结构化布局和视觉分隔，同时控制内容的 排列方式、间距和样式，帮助提升信息的可读性和页面的整体设计效果。
应用场景
1.留白分割
留白分割的作用在于通过适当的空白区域分隔信息，提升信息的可读性和层次感，避免视觉混乱。它能让内容更清晰、更易于阅读，同时增强整体设计的简洁感和专业性。
2.分区布局
分区布局的作用在于通过将界面或内容划分为不同的区域，实现信息的高效组织与展示。它能够帮助用户更直观地理解内容结构，提升信息的可读性和可用性，同时优化视觉效果，使界面更加清晰、有序。分区布局还能够根据需求灵活调整，适应不同场景和设备，从而提供更好的用户体验。
3.样式修饰
容器还常用于为页面中的其他组件添加样式，如背景色、边框、圆角、阴影等。通过这些视觉修饰，能够提升内容的美观度和层次感，使界面更加统一协调。例如在卡片、弹窗、提示框等组件中，容器常被用作样式包裹层，增强视觉聚焦效果。
常用属性
容器大小
| 属性 | 作用 | 默认值 |
|---|---|---|
| 宽 | 设置容器的宽度 | 80 |
| 高 | 设置容器的高度 | 80 |
| 最大宽度 | 限制容器的最大宽度，避免过度扩展 | |
| 最大高度 | 限制容器的最大高度，避免过度扩展 | |
| 最小宽度 | 设置容器的最小宽度，确保基本显示效果 | |
| 最小高度 | 设置容器的最小高度，确保基本显示效果 |
容器边框
| 属性 | 作用 | 备注 |
|---|---|---|
| 圆角 | 设置容器的圆角效果 |
|
| 边框 | 设置边框样式、颜色和宽度 |
|
容器边距
| 属性 | 作用 | 备注 |
|---|---|---|
| 内边距 | 控制容器内容与边框之间的距离 | 操作方式和圆角一致 |
| 外边距 | 控制容器与其他元素之间的间距 | 操作方式和圆角一致 |
容器背景
| 属性 | 作用 | 备注 |
|---|---|---|
| 背景颜色 | 设置容器的背景颜色 | 支持选择主题色或自定义颜色。 自定义颜色：支持输入 #AARRGGBB 形式的颜色值，例如 #FF000000 表示不透明的黑色。必须以 # 开头，否则将视为无效格式。 |
| 背景渐变 | 设置背景渐变效果 | 同时设置背景颜色和背景渐变则以背景渐变为准 |
| 渐变类型 | 渐变类型：线性渐变、放射状渐变、扇形渐变 | 线性渐变：增强方向感与结构感，适合按钮、标题等；放射状渐变：突出中心焦点，适合头像、卡片等；扇形渐变：营造旋转动感，常用于圆形图表与仪表盘。 |
| 过渡点 | 渐变颜色数组，至少包含两个颜色值，格式为 #AARRGGBB | |
| 渐变起点 | 渐变起始位置 | 仅线性渐变中使用 |
| 渐变终点 | 渐变结束位置，对应于渐变起点，决定渐变方向 | 仅线性渐变中使用 |
| 渐变中心点 | 渐变中心 | 仅放射状或扇形渐变使用 |
| 渐变半径 | 渐变半径，决定颜色扩散范围 | 仅放射状渐变使用 |
| 起始角度 | 扇形渐变起始角度 | 仅扇形渐变使用 |
| 结束角度 | 扇形渐变终止角度 | 仅扇形渐变使用 |
| 背景图片 | 设置容器的背景图片，支持网络或本地路径 | |
| 图片填充方式 | 设置背景图片的适应方式 | 填满容器：保持比例，可能会裁剪部分内容（常用）；包含：完整显示图片，不裁剪，但可能留白；完全填充：强制拉伸图片以完全填满容器，不保证比例；填满宽度：根据容器宽度缩放，保持比例，适合横图展示；填满高度：根据容器高度缩放，保持比例，适合竖图展示；按比例缩小:如果图片大于容器则缩放，否则保持原始大小；无：不缩放，图片保持原始大小显示。 |
| 图片来源 | 设置容器的背景图片来源 | 网络图片或者本地图片 |
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)