微信小程序第三章总结

小正啊

已于 2024-03-15 11:26:52 修改

阅读量794

点赞数 12

文章标签：微信小程序小程序

于 2024-03-13 20:03:34 首次发布

本文链接：https://blog.csdn.net/2301_81883462/article/details/136632350

版权

3.1 盒子模型

在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。

盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成。如上图所示。

此外，对padding、border和margin可以进一步细化为上、下、左、右4个部分，在css中分别进行设置。如下图：

图中各元素含义：

width和height 内容的宽度和高度。

padding-top、padding-right、padding-bottom和padding-left 上内边距、右内边距、底内边距和左内边距。

border-top、border-right、border-bottom和border-left 上边框、右边框、底边框和左边框。

margin-top、margin-right、margin-bottom和margin-left 上外边框、右外边框、低外边框和左外边框。

3.2 块级元素与行内元素

3.2.1 块级元素

代码（.wxml文件）：

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

运行结果如下：

3.2.2 行内元素

代码如下（.wxml文件）：

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

运行结果如下：

3.2.3 行内块元素

.wxml文件代码如下：

<view>
元素显示方式的<view style="display: inline-block;border:
 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">
 块级元素、行内元素和行内块元素</view>三种类型</view>

运行结果如下：

3.3 浮动与定位

3.3.1 元素浮动与清除

基本格式如下：

{float:none|left|right;}

示例代码（分别对box1、box2、box3元素左浮动）.wxml文件：

<view>box1,box2,box3</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0;">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 #0f0;">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:left;border: 1px solid #0f0;">box1</view>
<view style="float:left;border: 1px solid #0f0;">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: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>

运行结果如下图：

元素清除的基本格式：

{clear:left|right|both|none}

.wxml文件代码如下：

<view>box1 box2左浮动 box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float:left;border: 1px solid #0f0;">box1</view>
<view style="float:left;border: 1px solid #0f0;">box2</view>
<view style="clear:left;border: 1px solid #0f0;">box3</view>
</view>

运行结果如下：

另外，还可以在父级元素外添加一个空元素，实现父级包裹浮动元素，代码如下：

//wxml
<view>box1 box2 box3左浮动 在父级元素后添加一个空元素</view>
<view style="border: 1px solid #f00;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>
//wxss
.clearfloat::after{display: block;
clear: both;
height: 0;
content: "";}

运行结果如下：

注：如以上代码没有浮动，可切换渲染模式如下图：

3.3.2 元素定位

基本格式：

{position:static|relative|absolute|fixed}

.wxml文件：

<!--三个元素均未定位static -->
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box1</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box2</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box3</view>
<!--box2元素相对定位-->
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box1</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box3</view>
<!--box2元素绝对定位-->
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box1</view>
<view style="border:1px solid #f0f;width: 50px;height: 50px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box3</view>
<!--box2元素固定定位-->
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box1</view>
<view style="border:1px solid #00f;width: 50px;height: 50px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 50px;height: 50px;">box3</view>

运行结果如下：没加

加了

3.4 flex布局

flex布局是Flexible Box的缩写，称为弹性盒布局，是一种布局方式，用来为盒模型提供最大的灵活性，可以应用于容器中，也可以应用于行内元素。

Flex布局的作用是控制子集全部在主轴上排列，采用Flex布局的元素的父元素称为Flex容器，采用Flex布局的元素的子元素称为Flex项目，是容器的成员。容器默认存在着两根轴：水平主轴X和垂直主轴Y，其中一个为主轴，一个则为侧轴，主轴方向可以通过属性设置，默认情况下水平X轴为主轴。

3.4.1 容器属性

1、display

语法格式：

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

2、flex-direction

.box{flex-direction:row|row-reverse|column|column-reverse;}

(a)row; (b)row-reverse; (c)column; (d) column-reverse

3、flex-wrap

语法格式：

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

(a) nowrap; (b)wrap; (c)wrap-reverse

4、flex-flow

语法格式：

.box{
  flex-flow: <flex-direction>||<flex-wrap;
}

示例代码：

.box{ flex-flow: row nowrap;}//水平方向不换行
.box{flex-flow:row-reverse;}//水平方向逆方向换行
.box{ flex-flow: column wrap-reverse;}//垂直方向逆方向换行

5、justify-content

语法格式：

.box{justify-content: flex-start|flex-end|center|space-between|space-around;}

（a)flex-start; (b) center; (c)flex-end; (d)space-between; (e)space-aroun

6、 align-items

语法格式：

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

示例代码：

//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 120px;
}

运行结果如下图：

7、align-content

语法格式：

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

(a) flex-start (b) center (c) flex-end

3.4.2 项目属性

order 。定义项目的排列顺序，数值越小，排列越靠前，默认为0。
flex-grow 。定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 。定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 。定义了在分配多余空间之前，项目的默认大小。浏览器根据这个属性，计算主轴是否足够容纳所有项目。
flex 。是flex-grow、flex-shrink和flex-basis的简写。
align-self 。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1、order

语法格式如下：

.item{order:<number>;}

示例代码如下：

//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item"style="order:1">1</view>
<view class="item"style="order:2">2</view>
<view class="item"style="order:3">3</view>
<view class="item">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}

运行结果如图：

2、 flex-grow

语法格式如下：

.item{flex-grow:<number>;}

示例代码如下：

//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item"style="flex-grow:1">2</view>
<view class="item"style="flex-grow:2">3</view>
<view class="item">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}

运行结果如下：

3、flex-shrink

语法格式如下：

.item{flex-shrink:<number>;}

示例代码如下：

//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item"style="flex-shrink:2">2</view>
<view class="item"style="flex-shrink:1">3</view>
<view class="item"style="flex-shrink:4">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 150px;
  margin: 2px;
}

运行结果如下图：

4、flex-basis

语法格式如下：

.item{flex-basis:<number>|auto;}

示例代码：

//wxml
<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
<view class="item">1</view>
<view class="item"style="flex-basis:100px">2</view>
<view class="item"style="flex-basis:200px">3</view>
<view class="item">4</view>
</view>
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}

运行结果如下图：

5、flex

语法格式如下：

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

示例代码如下：

.item{flex:auto;}//等价于 .item{flex:1 1 auto;}
.item{flex:none;}//等价于 .item{flex:0 0 auto;}

6、 align-self

语法格式如下：

.item{align-self;auto|flex-start|flex-end|center|baseline|stretch;
}

3.5 本章小结

本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性。

小正啊

关注

12
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
微信小程序第三章总结

Flex布局的作用是控制子集全部在主轴上排列，采用Flex布局的元素的父元素称为Flex容器，采用Flex布局的元素的子元素称为Flex项目，是容器的成员。在css中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成。本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性。上外边框、右外边框、低外边框和左外边框。上边框、右边框、底边框和左边框。
复制链接

扫一扫