基本信息
文件名称: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。
案例
总结
本案例主要演示了盒模型的结构及边
框和边距的设置方法。