基本信息
文件名称:EX204-盒模型(微信小程序).pdf
文件大小:1.53 MB
总页数:11 页
更新时间:2025-06-04
总字数:约1.05千字
文档摘要

微信小程序开发

北方工业大学

案例

盒模型

案例描述

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

不同的布局模式。

实现效果

案例实现

实现过程通过录屏来实现

知识要点

盒模型

所有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。

案例

总结

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

框和边距的设置方法。