微信小程序布局快速入门

前言
本文是作者在学习微信小程序时为掌握页面布局而参考多种资料整理而成，希望能帮助大家在开发的过程中快速上手。
一、盒子模型
每个元素都会生成一个矩形框，每个元素框中心都有一个内容区(content),这个内容区周围有内边距(padding)、边框(border)和外边距(margin)，默认宽度为0。

Tip:WXSS完全遵循W3C盒子模型规范
w3c中的盒子模型的宽:包括margin+border+padding+width;（width为content的宽度）
width(模型宽度):margin2+border2+padding*2+width;

元素的显示方式：
块级元素：默认占一行高度(浮动后除外)。如view

行内元素：根据内容的大小决定，通过修改元素display属性为block可将此元素强制设置为块级元素。如text

Tip:块级元素的元素框的宽度与其父级元素的内容区相同；块级元素高度由其子元素(内容高度)决定。

1.1块级元素演示

<view style = "border:solid 1px">第一个块级元素</view><view style = "border:solid 10px;margin:10px;padding:10px">第二个块级元素</view><!--父级元素高度由内容决定-->>
<view style = "magin-top:10px;border:solid 1px"><view style = "height:100px">第三个块级元素</view>
</view>

结果：

1.2行内元素
将元素的display属性设置为inline可设置为行内元素。
总结：
和其它非块级元素都在一行上；
盒子模型中高度、宽度、上下margin、上下padding设置均无效，只能设置左右margin和padding；
宽度和高度不能直接设置；
行内元素中放置块级元素会引起不必要的混乱。

1.3行内块元素
将元素的display属性设置为inline-block。

行内块级元素是把块级元素以行的形式展现，相当于把图片放在文本中，可对宽度和高度进行设置。

二、浮动和定位
2.1浮动
元素通过float属性设置浮动，浮动的框可以向左或像右移动，直到其外边缘碰到包含框或另一个浮动框，其它文本会环绕而过。
演示

<view>
文本文本文本文本文本文本文本
<view style = "display:block;float:left;border:solid 1px;margin:20px">
浮动框
</view>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

结果

注意：父级元素只会包含第一个元素
例如

<view>
<view>第一元素</view>
<view style = "float:left">浮动元素</view>
</view>

结果浮动元素并未起效果

更多内容可参考W3C CSS 浮动
2.2定位
定位由positon属性控制

具体定位操作可参考W3C CSS position属性

2.3 Flex
所有 View 默认都是 block浮动布局，要使用 flex 布局的话需要显式的声明：

display:flex;

1.Flex容器属性

flex-direction 决定元素的排列方向
flex-wrap 决定元素如何换行
flex-flow flex-direction和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式
2.Flex容器内元素属性

flex-grow 当有多余空间时，元素的放大比例
flex-shrink 当空间不足时，元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex 是grow、shrink 、basis的简写
order 定义元素的排列顺序
align-self 定义元素自身的对齐方式

更多内容可参考微信小程序使用flex样式属性(干货)

谢谢阅读！

微信小程序布局快速入门相关推荐

微信小程序开发快速入门
最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...
史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
【微信小程序】开发入门篇（一）
前言 ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ [微信小程序]开发入门篇(一) 一.小程序简介 (1)小程序与普通网页开发的区别二.第一个小程序 (1 ...

微信小程序布局快速入门

微信小程序布局快速入门相关推荐

最新文章

热门文章