找回密码
 加入怎通
查看: 211|回复: 7

探讨小程序开发的布局(小程序开发原理与实战百度云)

[复制链接]
我来看看 发表于 2023-03-13 09:04:51 | 显示全部楼层 |阅读模式
K4 d3 e$ G! j) y' |/ e

谈到小程序布局就不得不谈WXSS (WeiXin Style Sheets)!WXSS是微信小程序专用的样式语言WXSS与css虽然在尺寸单位和样式导入不同,但是,具有CSS大部分特性小程序的样式,由项目公共样式和页面样式共同作用。

6 g# m3 o1 [* C

与Web开发不同的是,开发者不需要去优化样式文件的请求数量,只需要考虑代码的组织,样式文件最终会被编译优化小程序常见的五种布局方式:表格布局 是最早出现的布局方式table设计初衷,是为了呈现表格化数据。

* _/ p* ?2 U) a9 P

属于歪打正着的一种布局方式,兼容于所有的页面表现定位布局 根据参考元素的不同,设置当前元素的位置常见的五种定位方式:静态定位(static,正常的文档流)、绝对定位(absolute,相对于已定位父元素)、相对定位(。

* `' _+ \4 Z% d+ H# \$ C `

relative,相对其正常位置)、粘性定位(sticky,基于用户的滚动位置)、窗口定位(fixed ,基于可视窗口的固定位置)浮动布局 出现在css2.0中,设置元素浮动后,元素将脱离普通流,可以控制元素在水平上左右移动,再通过margin属性调整位置。

; D+ q; v- _' [1 X

主要用于设置多个元素,共存于一行弹性盒子布局 是一种一维布局模型,大部分的属性作用于主轴能够在子元素的大小未知或动态变化情况下,调节子元素的高度、宽度和排布的顺序,适应布局空间网格布局 是一个基于网格的二维布局系统,借鉴了平面装帧设计中的格线系统,将页面划分为一个个网格,定义这些网格的大小、位置、层次,组合做出各种各样的布局。

# ~& |' v2 z- @+ n" ?0 `

可以看作是table布局的升级版,由Microsoft提出。本文由尤佳coding原创,欢迎关注,带你一起长知识!

2 v9 ~' P1 T% d' ] 5 x. P3 a: w2 M2 h, B8 A) M5 p3 c F$ v& t# R4 c3 y * m7 I; y3 c# e, b4 {! j& ]; V

暂时无法加载帖子列表

回复

使用道具 举报

精彩台湾 发表于 2026-01-28 16:19:23 | 显示全部楼层
内容很干货,没有多余的废话,值得反复看
回复

使用道具 举报

codyness 发表于 2026-01-31 16:06:00 | 显示全部楼层
分析得很透彻,很多细节都说到点子上了~
回复

使用道具 举报

杰克船长 发表于 2026-02-23 21:23:21 | 显示全部楼层
蹲了这么久,终于看到有价值的讨论,支持一下!
回复

使用道具 举报

安夏。沫悲伤_ㄣ 发表于 2026-05-24 05:09:46 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复

使用道具 举报

净水材料 发表于 2026-07-25 08:56:52 | 显示全部楼层
完全赞同,我也是这么认为的,英雄所见略同~
回复

使用道具 举报

皇族top 发表于 2026-07-25 16:22:35 | 显示全部楼层
这个思路很新颖,打开了新世界的大门,谢谢分享
回复

使用道具 举报

happyqiuqiu 发表于 2026-09-28 15:01:06 | 显示全部楼层
楼主太厉害了,整理得这么详细,必须支持
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-10-1 15:18 , Processed in 0.076973 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表