前言
本文是作者在学习微信小程序时为掌握页面布局而参考多种资料整理而成，希望能帮助大家在开发的过程中快速上手。
一、盒子模型
每个元素都会生成一个矩形框，每个元素框中心都有一个内容区(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样式属性(干货)
谢谢阅读！
