基本信息

---

下载

文档摘要

---

微信小程序开发

北方工业大学

案例

盒模型

案例描述

设计一个小程序，利用盒模型的相关属性实现

不同的布局模式。

实现效果

案例实现

实现过程通过录屏来实现

知识要点

盒模型

所有WXML元素都可以看作盒子，在WXSS中，

“boxmodel”这一术语是用来设计和布局时使用。

盒模型本质上是一个盒子，封装周围的WXML元素，

它包括：边距，边框，填充和实际内容，模型结构

如所示。

盒模型

边框样式

border-style属性用来定义边框的样式，属性值

如表所示。

边框样式说明

none默认无边框

dotted定义一个点线边框

dashed定义一个虚线边框

solid定义实线边框

double定义两个边框

groove定义3D沟槽边框。效果取决于边框的颜色值

ridge定义3D脊边框。效果取决于边框的颜色值

inset定义一个3D的嵌入边框。效果取决于边框的颜色值

outset定义一个3D突出边框。效果取决于边框的颜色值

边框宽度

border-width属性用了设置边框宽度。

边框颜色

border-color属性用于设置边框的颜色。

单独设置各边

可以通过border-top、border-right、border-

bottom、border-left属性设置不同的侧面具有不同的

边框。

一次性设置边框属性

可以利用border属性一次性设置边框宽度、边

框样式和边框颜色。如：border:3pxdashed#00ff00。

案例

总结

本案例主要演示了盒模型的结构及边

框和边距的设置方法。