uniapp盒子模型

uniapp 盒子模型基础概念

uniapp的盒子模型与CSS标准盒子模型一致，包含内容区域（content）、内边距（padding）、边框（border）、外边距（margin）四部分。所有元素均可通过样式属性控制这些区域的尺寸和表现。

盒子模型属性设置

内容区域控制 通过width和height属性设置元素内容区域大小，支持rpx、px、百分比等单位：

.box {
  width: 200rpx;
  height: 100%;
}

内边距设置 使用padding系列属性控制元素内边距：

.item {
  padding: 10px; /* 四边统一 */
  padding-left: 20rpx; /* 单独设置左边距 */
}

边框配置 通过border属性组实现边框效果：

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* 圆角效果 */
}

外边距调整 使用margin控制元素外部间距：

.container {
  margin: 20rpx auto; /* 上下边距20rpx，水平居中 */
}

弹性盒子布局应用

uniapp推荐使用Flex布局进行页面结构设计，通过display: flex激活弹性容器：

.flex-container {
  display: flex;
  flex-direction: row; 
  justify-content: space-between;
}

子元素可通过flex属性分配空间：

.flex-item {
  flex: 1; /* 等分剩余空间 */
}

响应式适配方案

结合rpx单位实现不同屏幕适配：

.responsive-box {
  width: 750rpx; /* 设计稿750px宽时等于100%屏幕宽度 */
  padding: 20rpx;
  box-sizing: border-box; /* 包含padding在内的宽度计算 */
}

特殊场景处理

图片盒子模型 图片需显式设置display: block避免底部间隙：

.image-box img {
  display: block;
  width: 100%;
}

固定定位盒子 使用position: fixed时注意窗口坐标系：

.fixed-box {
  position: fixed;
  bottom: 0;
  width: 100%;
}

性能优化建议

避免深层嵌套盒子结构，减少层级能提升渲染性能。复杂布局建议使用虚拟列表或分片加载技术，uniapp提供的scroll-view组件适合长列表场景。