探讨小程序开发的布局（小程序开发部署流程）
zhezhongyun 2025-07-03 02:16 4 浏览
谈到小程序布局就不得不谈WXSS (WeiXin Style Sheets)！WXSS是微信小程序专用的样式语言。WXSS与css虽然在尺寸单位和样式导入不同，但是，具有CSS大部分特性。小程序的样式，由项目公共样式和页面样式共同作用。与Web开发不同的是，开发者不需要去优化样式文件的请求数量，只需要考虑代码的组织，样式文件最终会被编译优化。
小程序常见的五种布局方式：
表格布局 是最早出现的布局方式。table设计初衷，是为了呈现表格化数据。属于歪打正着的一种布局方式，兼容于所有的页面表现。
定位布局 根据参考元素的不同，设置当前元素的位置。常见的五种定位方式：静态定位（static，正常的文档流)、绝对定位（absolute，相对于已定位父元素）、相对定位（relative，相对其正常位置）、粘性定位（sticky，基于用户的滚动位置）、窗口定位（fixed ，基于可视窗口的固定位置）
浮动布局 出现在css2.0中，设置元素浮动后，元素将脱离普通流，可以控制元素在水平上左右移动，再通过margin属性调整位置。主要用于设置多个元素，共存于一行。
弹性盒子布局 是一种一维布局模型，大部分的属性作用于主轴。能够在子元素的大小未知或动态变化情况下，调节子元素的高度、宽度和排布的顺序，适应布局空间。
网格布局 是一个基于网格的二维布局系统，借鉴了平面装帧设计中的格线系统，将页面划分为一个个网格，定义这些网格的大小、位置、层次，组合做出各种各样的布局。可以看作是table布局的升级版，由Microsoft提出。
本文由尤佳coding原创，欢迎关注，带你一起长知识！
相关推荐
- 轻松玩转windows控制台(五):彻底搞懂屏幕缓冲区
-
写在前面在上一篇文章中，详细地介绍了控制台程序最容易令人困惑和混淆的地方，即什么是控制台窗口，什么是控制台屏幕缓冲区。并通过几个示例程序，演示了如何设置控制台窗口“显示区域”的大小。（轻松玩转wind...
- 零基础教你学前端——85、高度自适应
-
这节课，我们学习如何让元素的宽度和高度在容器里自适应。什么是宽高自适应呢？页面里有两个div，开始的时候宽度都是800px，当我们将浏览器窗口的宽度拖动到小于800px的时候，我们发现：上面的...
- Grafana可视化平台面板之Gauge仪表和Bar Gauge条形仪表
-
仪表（Gauge）仪表是一种用于展示单个数值指标并跟踪其随时间变化的图表类型。它通常用于显示系统的实时状态或关键性能指标，如CPU使用率、内存占用率等。仪表通过一个圆形或半圆形的表盘来展示数值，并可以...
- 网页五指棋游戏（五指棋单机）
-
完整代码如下，大家可以保存到html文件点击打开，就可以看到如上效果<!DOCTYPEhtml><htmllang="zh-CN"><head>...
- 2020年度中央机关公开遴选和公开选调公务员报名即将开始
-
新华社北京10月27日电（记者林晖）记者27日从国家公务员局获悉，2020年度中央机关公开遴选和公开选调公务员报名即将开始，考生可于10月28日8时至11月6日18时期间，登录“2020年度中央机关公...
- 小程序学习日志7:可滚动的视图区域组件(滚动条)
-
导读经过这段日子的学习，大家对小程序的了解多了多少呢？我们这段时间学了很多组件的用法，以及这些组件的属性和属性的合法值，图片、文字、块，还了解了不少的样式代码和小程序的基本知识。我们今天来讲一个可滚动...
- 四叶草SEO:主要SEO作弊方法之隐藏文字
-
石家庄四叶草SEO小编在这里介绍黑帽，并不意味鼓励大家使用黑帽，恰恰相反，而是因为很多SEOer无意之中就使用了黑帽手法，自己却不知道。对于一个正常的商业网站和大部分个人网站来说，做好内容，正常优化，...
- 鸿蒙仓颉语言开发实战教程:商城搜索页
-
大家好，今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。导航栏搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简...
- 鸿蒙Next仓颉语言开发实战教程:设置页面
-
仓颉语言商城应用的页面开发教程接近尾声了，今天要分享的是设置页面：导航栏还是老样式，介绍过很多次了，今天不再赘述。这个页面的内容主要还是介绍List容器的使用。可以看出列表内容分为三组，所以我们要用到...
- CSS box-sizing 属性详解（css中box属性有哪些）
-
box-sizing是CSS的一个非常重要的属性。CSS的box-sizing属性用于控制元素尺寸的计算方式，决定了元素的宽度（width）和高度（height）是否包含内边距（...
- 68.C# MenuStrip控件（c#基本控件）
-
摘要MenuStrip控件是在.NETFramework版本2.0中引入的。可以通过MenuStrip控件，轻松创建像MicrosoftOffice中的菜单。MenuStrip...
- Qt使用布局管理器实现扩展对话框（qt选择文件路径对话框）
-
今天跟大家讲讲扩展对话框的实现；扩展对话框效果如下所示：(1)初始界面：(2)单击<More>按钮：(3)再次单击<More>按钮：这节主要讲解用布局管理器方式实现，下节讲解用...
- 探讨小程序开发的布局（小程序开发部署流程）
-
谈到小程序布局就不得不谈WXSS(WeiXinStyleSheets)！WXSS是微信小程序专用的样式语言。WXSS与css虽然在尺寸单位和样式导入不同，但是，具有CSS大部分特性。小程序的样式...
- 图片懒加载的现代 JavaScript 实现，仅需 10 行代码
-
过去，实现懒加载通常需要监听scroll事件，并结合getBoundingClientRect()等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。现代浏览器提供了Inters...
- JS实现轮播图案例(一看就懂，逻辑清晰)
-
1.功能分析实现如图所示的轮播图，要实现的功能主要有：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片下滑一张；点击左侧按钮，图片上滑一张。图片播放的同时，下面小圆圈模块跟...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)