微信小程序第三章总结

微信小程序的视图层由wxml和wxss组成，其中，wxss是基于css扩展的样式语言，用于描述wxml的组成，决定wxml的组件如何显示。wxss具有大部分的特性。

一，盒子模型

盒子模型就是我们在网页设计中常用到的一种思维方式。在css中，一个独立的盒子模型由内容，内边距，边框和外边框四个部分组成，如图：

二，块级元素和行内元素

1.块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块边距、右外边 级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下：、右边框、底 (1)一个块级元素占一行。

2.行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不
示方式由displey 占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元素即被设置为行内元素。

三，浮动与定位

1.元素浮动与清除

元素浮动就是设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。

运行效果如图：

运行代码：

index.wxml:

<view>box1,box2,box3</view>

<view>

<view style="border: 1px solid rgb(19, 19, 3);">box1</view>

<view style="border: 1px solid rgb(19, 19, 3);">box2</view>

<view style="border: 1px solid rgb(19, 19, 3);">box3</view>

</view>

<view>box左浮动</view>

<view style="border: 1px solid rgb(19, 19, 3);padding: 5px;">

<view style="float: left;border: 1px solid #0f0;">box1</view>

<view style="border: 1px solid #0f0;">box2</view>

<view style="clear: left;border: 1px solid #0f0;">box3</view>

</view>

<view style="border: 1px solid rgb(19, 19, 3);padding: 5px;">

<view style="float: left;border: 1px solid #0f0;">box1</view>

<view style="float: left;border: 1px solid #0f0;">box2</view>

<view style="float: left;border: 1px solid #0f0;">box3</view>

</view>

四，flex布局

容器属性

1.display:

display用来指定元素是否为flex布局，语法格式为：

.box{display:flex | inline - flex;}

其中，flex为块级flex布局，该元素变为弹性盒子；

2.flex-direction:

flex-direction用于设置主轴的方向，即项目排列方向。

flex-direction示例：

（a）rpw;（b）row-revert;（c）column;（d）column-reverse;

3.flex-wrap:

flex-wrap用于指定当项目在一根轴线的排列位置不够时，项目是否换行。

flex-wrap示例：

4.flex-flow:

flex-flow是flex-dierction和flex-wrap的简写模式，默认值为row nowrap。

5.justify-content:

justify-content用于定义项目在主轴上的对齐方式。

justify-content示例：

6.align-items:

align-items用于指定项目在交叉轴上的对齐方式。

7.align-content:

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果只有一根轴线，则此方法不生效。

align-content示例：

项目属性

1.order：

order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。

2.flex-grow:

flex-grow定义项目的放大比例，默认值为0，即不放大。

3.flex-shrink:

flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小

4.flex-basis:

flex 属性是flex-grow、flex -shrink 和flex-basis的简写，其默认值分别为0、1、auto。

5.flex:

flex 属性是flex-grow、flex -shrink 和flex-basis的简写，其默认值分别为0、1、auto。

6.align-self:

align -self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下：

.item  {align -self:auto  | flex - start | flex - end Icenter | baseline stretch;} 
在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。 <auto表示继承容器align-items的属性，如果没有父元素，则等于stretch(默认值)。