微信小程序案例 2.3 CSS 盒模型实验

1.markdown

# 微信小程序案例2.3 CSS盒模型实验
## 一、实验目的
1. 理解微信小程序CSS盒模型原理，掌握content、padding、border、margin四大组成部分。
2. 熟练使用width、height、background‑color、border、padding、margin盒模型相关样式属性。
3. 练习scroll‑view滚动容器的使用，完成多个盒子布局展示。
4. 在原有案例基础上新增第三个展示盒子，完成课程作业要求。

## 二、实验环境
- 开发工具：微信开发者工具
- 基础渲染模式：style:"v2"
- 项目类型：不使用云服务的普通小程序项目

## 三、盒模型理论知识
CSS盒模型把每一个页面元素看作一个矩形盒子，由4部分构成：
1. **content（内容区）**：存放文字内容，width、height控制内容大小。
2. **padding（内边距）**：内容和边框之间的距离。
3. **border（边框）**：盒子的边界，可以设置粗细、颜色、实线/虚线样式。
4. **margin（外边距）**：盒子和其他盒子之间外部的距离。

## 四、项目文件结构

miniprogram‑1

├── app.json # 小程序全局配置

├── app.wxss # 全局公共样式

└── pages

└── index

├── index.js

├── index.json

├── index.wxml

└── index.wxss

## 五、核心代码片段
### 1.app.json全局配置
```json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "盒模型",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

2.index.wxml 页面结构

<scroll-view class="scrollarea" scroll-y type="list">
  <view class="box">
    <view class="title">中国杰出科学家</view>
    <view class="box-model-01">
      王淦昌（1907‑1998），江苏常熟人，男，中国科学院院士，1999年被追授“两弹一星”功勋勋章，中国核科学的奠基人和开拓者之一，世界激光惯性约束核聚变理论与研究的创始人之一。
    </view>
    <view class="box-model-02">
      于敏（1926‑2019），河北宁河人（现天津市宁河区），男，核物理学家，中国科学院院士，“共和国勋章”获得者。在中国氢弹原理突破中解决了诸多问题，对中国核武器发展到国际先进水平做出重要贡献。
    </view>
    <!--作业新增第三个盒子：钱三强-->
    <view class="box-model-03">
      钱三强，出生于浙江绍兴，原籍浙江湖州，核物理学家，中国原子能科学事业的创始人，两弹一星功勋奖章获得者，中国科学院学部委员，中国科学院原子能研究所研究员、原所长。
    </view>
  </view>
</scroll-view>

3.app.wxss 全局样式

.box {
  /* 设置外边距 */
  margin: 20rpx;
  /* 设置内边距 */
  padding: 20rpx;
  /* 设置边框 */
  border: 2rpx solid silver;
}

.title {
  /* 设置字体大小 */
  font-size: larger;
  /* 设置字体加粗 */
  font-weight: bolder;
  /* 设置居中对齐 */
  text-align: center;
  /* 设置下外边框 */
  margin-bottom: 30rpx;
  /* 设置字体颜色 */
  color: red;
}

4.index.wxss 页面样式

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.box-model-01 {
  width: 80%;
  height: 240rpx;
  /* 设置背景颜色 */
  background-color: yellow;
  border: 6rpx dashed #f00;
  /* 设置内边距 */
  padding: 40rpx;
  /* 设置外边距 */
  margin: 40rpx;
}

.box-model-02 {
  width: 80%;
  height: 280rpx;
  border: 10rpx solid rgb(0, 255, 0);
  /* 上内边距 */
  padding-top: 40rpx;
  /* 下外边距 */
  margin-bottom: 40rpx;
  margin:40rpx;
}

/*作业新增第三个盒子 */
.box-model-03{
  width: 80%;
  height:280rpx;
  background-color:#f2d2a9;
  border:8rpx solid #992600;
  padding:40rpx;
  margin:40rpx;
}

六、运行效果

1. 页面顶部导航栏标题显示 “盒模型”。 2. 页面红色居中标题：中国杰出科学家。 3. 第一个盒子：黄色背景，红色虚线边框，展示王淦昌介绍。 4. 第二个盒子：绿色实线边框，展示于敏介绍。 5. 第三个新增盒子：土黄色背景，棕红色边框，展示钱三强介绍。 6. 全部盒子在 scroll‑view 滚动容器内，页面支持纵向滚动。

七、实验总结

1.margin 控制盒子外部距离，padding 控制盒子内容距离边框的内部距离，二者不要混淆。 2.border 可以设置粗细、颜色、solid 实线 /dashed 虚线多种样式。 3.rpx 是小程序自适应单位，可以在不同尺寸手机自动适配。 4. 本次作业在课件原有两个盒模型基础上，增加第三个盒子，加深对盒模型各个属性的理解。 5. 写代码要注意全部使用英文半角符号，中文标点会直接造成样式报错失效。