微信小程序盒模型实验

盒模型是CSS布局最基础的核心概念。页面中每一个元素都相当于一个盒子，盒子由内容content、内边距padding、边框border、外边距margin四部分组成。本次借助微信小程序完成案例，通过三个展示科学家简介的盒子，直观区分内边距与外边距，掌握边框、背景样式的编写。 

实验目的1）理解CSS盒模型四个组成部分：content、padding、border、margin。

2）分清padding内边距与margin外边距的区别。

3）学会设置边框粗细、边框线型、背景颜色。

4）能够为多个盒子分别设置独立样式，完成页面布局

开发环境

操作系统：Windows

开发工具：微信开发者工具

项目模式：不使用云服务、不选用模板

 盒模型理论知识

1. content：内容区域，存放文字图像；

2. padding 内边距：盒子内部，内容与边框之间的距离；padding越大，文字离边框越远；

3. border 边框：盒子的边线，可设置粗细、颜色、线型（solid实线，dashed虚线）；

4. margin 外边距：盒子外部，当前盒子和旁边其他盒子之间的空白距离。

5 运行效果说明

页面一共三个盒子，每个盒子样式互不相同：

1. 盒子1（box‑model‑01）：黄色背景、红色虚线边框；设置四周内边距、四周外边距；

2. 盒子2（box‑model‑02）：绿色实线边框；只设置上方的内边距，只设置底部外边距；

3. 盒子3（box‑model‑03）：浅蓝色背景，蓝色实线边框。

通过对比三者外观，能够直观观察padding、margin、border分别带来的布局变化。