摘要本次完成小程序盒模型案例作业学习content‑box与border‑box两种盒模型的区别使用 view 实现卡片布局完成科学家介绍页面开发记录开发过程中的问题与知识点。一、盒模型两个核心类型1. content‑box标准盒模型默认box-sizing: content-box这是浏览器默认行为。总宽度 width padding borderwidth 只代表内容区域宽度内边距 padding、边框 border 会额外增加盒子整体大小。2. border‑box边框盒模型box-sizing: border-box总宽度 widthpadding 和 border 会包含在 width 内部设置的 width 已经把内边距、边框算进去不会向外撑大盒子。开发中我们经常使用这个方便做固定尺寸布局。二、作业需求完成案例 2.3 盒模型基础练习新增一个盒子存放中国核物理学家的故事完成样式美化。运用盒模型属性设置边框、内边距、背景色区分不同盒子样式。代码展示!--index.wxml-- navigation-bar title盒模型 back{{false}} colorblack background#fff/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle中国杰出科学家/view view classbox-model-01 王淦昌1907-1998江苏常熟人男中国科学院院士1999年被追授“两弹一星”功勋勋章中国核科学的奠基人和开拓者之一世界激光惯性约束核聚变理论与研究的创始人之一。 /view view classbox-model-02 于敏1926-2019河北宁河人现天津市宁河区男核物理学家中国科学院院士“共和国勋章”获得者。在中国氢弹突破中解决了诸多问题对中国核武器发展到国际先进水平做出重要贡献。 /view view classbox-model-03 钱三强1926-2019浙江湖州人男核物理学家中国原子能事业的主要奠基人。领导建成中国第一个重水反应堆为两弹事业培养大批科技人才。 /view /view /scroll-view/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .box{ padding: 20rpx; margin: 20rpx; background: #f5f5f5; box-sizing: border-box; } .title{ font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; } .box-model-01{ padding: 25rpx; margin: 15rpx 0; border: 2rpx solid #4488dd; border-radius: 12rpx; background: #1c9fa3; box-sizing: border-box; } .box-model-02{ padding: 25rpx; margin: 15rpx 0; border: 2rpx solid #77b822; border-radius: 12rpx; background: #0b5c44; box-sizing: border-box; } .box-model-03{ padding: 25rpx; margin: 15rpx 0; border: 2rpx solid #601791; border-radius: 12rpx; background: #75073e; box-sizing: border-box; }踩坑小记一开始没分清 margin 和 padding padding盒子内部文字距离边框的距离 margin盒子和外面其他盒子之间的空隙一开始全部用 content-box一改 border盒子直接撑大布局直接乱掉。 后面写卡片布局直接优先 border-box省事太多。总结这次实操下来才算真正吃透两种盒模型的区别。之前光看课本概念很难体会到宽度计算上的差异动手调试之后一眼就能看出两种模式带来的布局变化。盒模型是前端布局的基础之后写页面卡片、组件都会频繁用到以后写代码我会优先选用 border-box 来固定盒子尺寸减少布局错乱的问题。
