第三章总结

盒子模型 

小程序中的盒子模型是**用于布局和定位元素的基础模型，它包括内容、内边距、边框和外边距四个部分。

具体来说，盒子模型的各个部分包括：

1. 内容（Content）：这是盒子的核心部分，显示文本、图片等实际内容。内容区域的尺寸可以通过设置宽度（width）和高度（height）来定义。
2. 内边距（Padding）：是指内容与边框之间的透明区域。可以通过WXSS的padding属性来设置内边距的大小。
3. 边框（Border）：包围在内容和内边距之外的线型区域。可以设置边框的样式、宽度和颜色，通过border-style、border-width和border-color属性来进行设置。
4. 外边距（Margin）：这是围绕在边框外面的透明区域，它决定了盒子与其他元素之间的距离。外边距的大小可以通过margin相关属性设置。

此外，在小程序中，任何一个容器都可以指定为Flex布局，这使得盒模型更加灵活。使用display: flex;可以启用一个容器的弹性布局特性。Flex布局提供了一种简便而强大的方式去处理项目中的布局问题，例如对齐、分布、空间分配等。

总的来说，了解和应用盒子模型对于小程序开发是非常重要的，它能够帮助开发者创建出既美观又符合设计规范的界面。 

块元素

<view style = "border:1px solid #f00">块级元素</view> 
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f ;width: 200px;height: 80px;">块级元素3</view>
<view style="border:  1px solid #ccc;">
<view style="height: 60px;"></view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父块元素高度决定，内容为文本</view>

行内元素

<view style="padding: 20px;">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素
</view>一行显示不全，自动换行显示
</view>

行内块元素

<view>box1,box2,box3 没浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
   <view style="border: 1px solid #f0f;">box1</view>
   <view style="border: 1px solid #0f0;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1左浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
   <view style="border: 1px solid #0f0;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1 box2 右浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
   <view style="float: right;border: 1px solid #f0f;">box1</view>
   <view style="float: right;border: 1px solid #f0f;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1,box2,box3 右浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: right;border: 1px solid #f0f;">box1</view>
    <view style="float: right;border: 1px solid #f0f;">box2</view>
    <view style="float: right;border: 1px solid #f0f;">box3</view>
   </view>
   <view>box1,box2,左浮动box3 清除浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
    <view style="float: left;border: 1px solid #f0f;">box2</view>
   <view style="clear: left;border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1,box2,box3 左浮动 在父元素后添加一个空元素</view>
   <view style="border: 1px solid #f00;padding: 5px;"class="clearfloat">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
    <view style="float: left;border: 1px solid #f0f;">box2</view>
    <view style="float: left;border: 1px solid #f0f;">box3</view>
   </view>

浮动与定位

元素定位
<view style="position: relative;">
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(195, 15, 240);width:100px;height:100px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>
</view>
  
<!--box2 元素相对定位 relative top:30px left:30px -->
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(12, 172, 247);width:100px;height:100px;position:relative; left:30px;top:30px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>
 
<!--box2 元素绝对定位 absolute top:30px left:30px -->
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(235, 11, 149);width:100px;height:100px;position:absolute; left:30px;top:30px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>
 
<!-- box2 固定定位 fixed top:30px left:30px -->
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(228, 15, 61);width:100px;height:100px;position:fixed; left:30px;top:30px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>

 flex布局

flex布局是万维网联盟(World Wide Web Consortium，W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。 flex 是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
flex 布局主要由容器和项目组成，采用flex 布局的元素称为flex容器(flex container), flex 布局的所有直接子元素自动成为容器的成员，称为flex 项目(flexitem)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做crossstart,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。flex 布局模型 
设置 display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向.

 容器属性

1.dispaly 语法格式：
.box{display:flex |inline-flex;}
2.flex-direction
.box{ flex-direction:row|row-reverse |column-reverse;}
row -reverse——主轴为水平方向，起点在右端；
column——主轴为垂直方向，起点在顶端；
column——reverse——主轴为垂直方向，起点在底端。

3.flex-wrap

.box{ flex-wrap:nowrap |wrap-reverse;}

nowrap——不换行，默认值；

wrap——换行，第一行在上方；

wrap——reverse——换行，第一行在下方。

4.flex-flow
.box{ flex-flow:<flex-direction>||<flex-wrap>;}
5. justify-content
.box{justify-content:flex-start |flex-end |center |space-between |space-around;}
justify—content——与主轴方向有关，默认主轴水平对齐，方向从左到右；
flex-start——左对齐，默认值；
flex——end——右对齐；
center——居中
space-between——两端对齐，项目之间的间隔都相等；
space-around——每个项目两侧的间隔相等。

6.align - items
.box { align -items:flex-start |flex-end |center |baseline |stretch;}
align - items——与交叉轴方向有关，默认交叉由上到下；
flex-start——交叉轴起点对齐；
flex-end——交叉轴终点对齐；
center——交叉轴中线对齐；
baseline——项目根据它们第一行文字的基线对齐；
stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

7.align—content

.box{ align - content:flex-start |flex-end | center |space - between |space - around |stretch}