- Z2 Z( }- S- @: B+ F$ z, R' ` 谈到小程序布局就不得不谈WXSS (WeiXin Style Sheets)!WXSS是微信小程序专用的样式语言WXSS与css虽然在尺寸单位和样式导入不同,但是,具有CSS大部分特性小程序的样式,由项目公共样式和页面样式共同作用。
2 k6 z0 e: \% ?) x* B$ B' z 与Web开发不同的是,开发者不需要去优化样式文件的请求数量,只需要考虑代码的组织,样式文件最终会被编译优化小程序常见的五种布局方式:表格布局 是最早出现的布局方式table设计初衷,是为了呈现表格化数据。 + u5 B# d+ p# R: x0 S' C7 M
属于歪打正着的一种布局方式,兼容于所有的页面表现定位布局 根据参考元素的不同,设置当前元素的位置常见的五种定位方式:静态定位(static,正常的文档流)、绝对定位(absolute,相对于已定位父元素)、相对定位(。 / V) `$ I8 x* k2 Z5 k: Q
relative,相对其正常位置)、粘性定位(sticky,基于用户的滚动位置)、窗口定位(fixed ,基于可视窗口的固定位置)浮动布局 出现在css2.0中,设置元素浮动后,元素将脱离普通流,可以控制元素在水平上左右移动,再通过margin属性调整位置。
+ O+ ^4 X; ]" S- d/ l- f+ | 主要用于设置多个元素,共存于一行弹性盒子布局 是一种一维布局模型,大部分的属性作用于主轴能够在子元素的大小未知或动态变化情况下,调节子元素的高度、宽度和排布的顺序,适应布局空间网格布局 是一个基于网格的二维布局系统,借鉴了平面装帧设计中的格线系统,将页面划分为一个个网格,定义这些网格的大小、位置、层次,组合做出各种各样的布局。 * b5 ^4 G3 N: S% m ^' C
可以看作是table布局的升级版,由Microsoft提出。本文由尤佳coding原创,欢迎关注,带你一起长知识!
, w Z$ Q) N9 T- N0 I, [9 l) T- S+ Z) q6 m" \( D, e& d
4 i; q) r3 P8 ^' {& k- v& O$ G3 } s, I: b) A+ G* ~& q
6 ]; ^8 L1 o. R3 |- ] |