小程序编程基础（二）

小程序编程基础（二）

1.盒模型

1.1知识点

（1）盒模型的结构。

（2）边框的设置方法，包括边框宽度、样式和颜色。

（3）编剧的设置方法，包括外边距和内边距。

1.2盒模型

所有WXML元素都可以看做盒子，在WXSS中，box model这一术语是用来设置布局时使用。盒模型本质上是一个盒子，封装周围WXML元素，他包括边距，边框，填充和实际内容，模型结构如图01所示，各部分说明如下。

（1）element（内容）：盒子的内容，包括文本和图像。

（2）padding（内边距）：清楚内容周围的区域，内边距是透明的。

（3）border（边框）：围绕在内边距和内容外的边框。允许指定一个元素边框的样式、宽度和颜色。

（4）margin（外边距）：清除边框外的区域，外边距是透明的。

（5）width（宽度）：盒子内容的宽度。

（6）height（高度）：盒子内容的高度。

1.3边框样式

border-style属性用来定义边框的样式，属性值如下表所示。

边框样式	说明
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
soild	定义实线边框
double	定义两个边框。两个边框的宽和border-width的值相同
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。效果取决于边框的颜色值

1.4边框宽度

border-width属性用于设置边框宽度。

（1）指定长度值，单位为px，pt，cm，em等。

（2）使用3个关键字之一：thick、medium（默认值）和thin。

1.5边框颜色

border-color属性用于设置边框的颜色。

（1）Name：指定颜色名称，如‘red’，‘yellow’。

（2）RGB：指定RGB值，如’rgb（0,255,0）‘。

（3）RGBA：指定RGBA值，如‘rgba（255,0,0,1）’。

（4）Hex：指定十六进制值，如‘#911005’。

注意：R(Red)G(Green)B(Blue)的范围在0255之间，A(Alpha）表示透明度，其范围在01之间。

1.6单独设置各边

可以通过border-top、border-right、border-bottom、border-left属性设置不同的侧面具有不同的边框。

1.7一次性设置边框属性

可以利用border属性一次性设置边框宽度、边框样式和边框颜色，设置方法是：border：border-width border-color，如：border：3px dashed #00ff00。

1.8案例分析

1.8.1实现效果

1.8.2案例实现

（1）编写index.wxml文件代码

<!--index.wxml-->
<view class="box">
  <view class="title">盒子模型</view>
  <view class="boxModel01">
    .boxModel01{
    width: 80%;
    height: 100px;
    background-color: #011004;
    border: 1px dashed #f00;
    padding: 20px;
    }
  </view>
  <view class="boxModel02">
    .boxModel02{
    width: 80%;
    height: 100px;
    border: 5px solid rgb(0,255,0);
    padding-top: 20px;
    margin-bottom: 20px;
    }
  </view>
  <view class="boxModel03">
    .boxModel03{
    width: 80%;
    height: 120px;
    border: 5px dotted rgba(0,0,255,0.3);
    padding-left: 20px;
    margin: 0 20px;
    }
  </view>
</view>

（2）编写index.wxss文件代码

/**index.wxss**/
.boxModel01 {
  width: 80%;
  height: 100px;
  background-color: #cec659;  /*背景颜色*/
  border: 1px dashed #f00;
  padding: 20px；             /*内边距*/
  margin: 20px;              /*外边距*/
}
.boxModel02 {
  width: 80%;
  height: 100px;
  border: 5px solid rgb(0, 255, 0);
  padding-top: 20px;        /*内上边距*/
  margin-bottom: 20px;      /*外下边距*/
}
.boxModel03 {
  width: 80%;
  height: 120px;
  border: 5px dotted rgba(0, 0, 255, 0.3);
  padding-left: 20px;      /*内左边距*/
  margin: 0 20px;          /*外上下边距为0，左右边距为20px*/
}

1.9总结与思考

（1）盒模型中的内容超出了给定的模型尺寸，即超出了width和height限定的范围，模型应该如何处理？

overflow属性

• visible：默认值，内容不会被修剪，会出现在元素框之外；
• hidden：内容会被修剪，并且其余内容是不可见的；
• scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；
• auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容；
• inherit：规定应该从父元素继承overflow属性的值。

（2）盒模型的背景包括padding范围吗？

• padding是元素内容到元素边框之间的距离，叫内填充、补白或内边距；
• padding区域内会显示背景色和背景图片；

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

2.flex弹性盒模型布局

2.1知识点

（1）flex布局方法。

（2）利用line-height属性实现文字垂直居中对齐的方法。

2.2flex简介

flex是flexible box的缩写，以为“弹性布局”，用来对盒状模型进行布局。采用翻了下布局的元素称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。容器默认存在两根轴：主轴和叉轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束的位置叫做cross end。项目默认沿主轴排列。但项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size，如下图03所示。

（1）flex容器布局属性

属性	含义	合法值
flex-direction	主轴的方向（即项目的排列方向）	row，row-reverse，column，column-reverse
flex-wrap	如果一条轴线排不下，如何换行	nowrap，wrap，wrap-reverse
justify-content	项目在主轴上的对齐方式	flex-start，flex-end，center，space-between，space-around
align-items	项目在交叉轴上的对齐方式	flex-start，flex-end，center，baseline，stretch
align-content	项目在交叉轴上有多跟轴线时的对齐方式	flex-start，flex-end，space-between，center，space-around，stretch

（2）flex项目布局属性

属性	说明
order	项目的排列顺序。数值越小排列越靠前，默认为0
flex-grow	各项目宽度之和小于容器宽度时，各项目分配容器剩余宽度的放大比例，默认为0，即不放大
flex-shrink	各项目宽度之和大于容器宽度时，各项目缩小自己宽度比例，默认为1，即该项目将缩小
flex-basis	元素宽度的属性，和width功能相同，但比width的优先级高
flex	是flex-grow，flex-shrink和flex-basis的缩写，默认值为0 1 auto。后两个属性可选
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

2.3利用line-heught设置文本垂直居中原理

line-height可以理解为每行文字所占的高度。比如说，有一行高度为20px的文字，如果设置为line-height：50px，那就是说，这行文字的高度将会占50px，由于每个字的高度只有20px，于是浏览器就把多出来的30px在这行文字的上面加上了15px，下面加上了15px，这样文字就在这50px的空间内是居中了。

2.4案例分析

2.4.1实现效果

2.4.2案例实现

（1）index.wxml

<view class="box">
  <view class="title">页面布局示例</view>
  <!-- 实现三栏水平均匀分布 -->
  <view class="boxModel04">
    <view style="background-color:red;flex-grow:1">1</view>
    <view style="background-color:yellow;flex-grow:2">2</view>
    <view style="background-color:blue;flex-grow:1">3</view>
  </view>
  ----------------------------------------------------
  <!-- 实现左右混合布局 -->
  <view class="boxModel05">
    <view style="background-color:red;width:50%;flex-grow:1">1</view>
    <view style="display:flex;flex-direction:column;width:50%;flex-grow:1;line-height:150rpx">
      <view style="background-color:yellow;flex-grow:1">2</view>
      <view style="background-color:blue;flex-grow:1">3</view>
    </view>
  </view>
  ---------------------------------------------------
  <!-- 实现上下混合布局 -->
  <view style="display:flex;text-align:center;flex-direction:column;line-height:300rpx">
    <view style="background-color:red;height:100rpx;line-height:100rpx">1</view>
    <view style="display:flex;flex-direction:row;flex-grow:1;line-height:200rpx">
      <view style="background-color:yellow;flex-grow:1">2</view>
      <view style="background-color:blue;flex-grow:1">3</view>
    </view>
  </view>
</view>