微信小程序第三章总结

于 2024-03-14 12:56:49 发布
阅读量2.1k 收藏 26
点赞数 49
文章标签： 微信小程序 小程序 notepad++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2402_83166971/article/details/136674251
版权

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、块级元素

<view style = "border:1px solid #f00"> 块状元素1</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">块状元素4</view>
</view>

<view style="border: 1px solid #f00;width:100px;background-color:#ccc">父级元素高度随内容决定，内容为文本
</view>

3.2.2、行内元素

<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>

3.2.3、行内块元素

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

3.3、浮动与定位

3.3.1、元素浮动与清除

box1,box2,box3 没浮动
<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>
box1左浮动
<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>
box1、box2左浮动
<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>

box1 box2 box3左浮动

<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>
box1 box2 左浮动 box3 清除左浮动
 <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>
box1 box2 box3 左浮动 在父元素后添加一个空元素
 <view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
 <view style="border: 1px solid #f00;padding: 5px;" class="clearfloat">
  <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>
 运行效果：

3.3.2、元素定位

三个元素均未定位
<!--三个元素均未定位 static-->
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box1</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box2</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box3</view>

 

元素相对定位
<!--box2元素相对定位 relative top:30px left:30px-->
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box1</view>
  <view style="border: 1px solid #0f0;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 #0f0;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 #0f0;width:100px;height: 100px;position: fixed;left: 30px;top: 30px">box2</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box3</view>

 

 如果将box1、box2、box3的父元素采用相对定位，将box2采用绝对定位:
<!--如果将box1、box2、box3的父元素采用相对定位，将box2采用绝对定位-->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f">
<view style="border: 1px solid #0f0;width:100px;height: 100px">box1</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px;position: absolute;left: 30px;top: 30px">box2</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box3</view>
</view>

 如果将box1、box2、box3的父元素采用相对定位，将box2采用固定定位:
 <!--如果将box1、box2、box3的父元素采用相对定位，将box2采用固定定位-->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f">
<view style="border: 1px solid #0f0;width:100px;height: 100px">box1</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px;position: fixed;left: 30px;top: 30px">box2</view>
  <view style="border: 1px solid #0f0;width:100px;height: 100px">box3</view>
</view>

  

 3.4、flex布局

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

 3.4.1、容器属性

1、display

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

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

其中，flex——块级flex布局，该元素变为弹性盒子；
      inline- flex——行内flex布局， 行内容器符合行内元素的特征， 同时在容器内又符合flex 布局规范。
      设置了flex布局之后，子元素的float、clear 和vertical-align属性将失效。

2、flex-direction

flex-direction 用于设置主轴的方向，即项目排列的方向， 语法格式为：

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

其中，row——主轴为水平方向， 起点在左端，当元素设置为flex布局时， 主轴默认为 row;

row-reverse——主轴为水平方向，起点在右端；

column——主轴为垂直方向，起点在顶端；

column-reverse——主轴为垂直方向，起点在底端。
图3-13 所示为元素在不同主轴方向下的显示效果 

3、flex-wrap

flex - wrap 用来指定当项目在一根轴线的排列位置不够时， 项目是否换行， 其语法格式如下：

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

其中，nowrap——不换行，默认值；
      wrap——换行，第一行在上方；
      wrap - reverse——换行，第一行在下方。
      当设置换行时，还需要设置align-item 属性来配合自动换行，但align-item的值不能为
“stretch”。
      flex-wrap不同值的显示效果如图3-14所示。

4、flex-flow

flex-flow是flex-direction和flex -wrap的简写形式， 默认值为row nowrap。 语法格式如下：

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


示例代码如下：

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

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——每个项目两侧的间隔相等。
       图3-15所示为justify-content 不同值的显示效果。

6、align-items

align-items 用于指定项目在交叉轴上的对齐方式， 语法格式如下：

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

其中，align-items——与交叉轴方向有关，默认交叉由上到下；
       flex -start——交叉轴起点对齐；
       flex -end——交叉轴终点对齐;

        center——交叉轴中线对齐；

       baseline——项目根据它们第一行文字的基线对齐；
       stretch——如果项目未设置高度或设置为auto， 项目将在交叉轴方向拉伸填充容器，此为默认值。
示例代码如下：

<!--//.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

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下：

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

其中，space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；

       space -around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。

       其余各属性值的含义与align-items属性的含义相同。

       图3-17所示为align-content不同值的显示效果。

​​​​​​​

3.4.2、项目属性

1、order

order 属性定义项目的排列顺序，数值越小，排列越靠前。默认值为零。语法格式如下：

.item{order:<number>;}

 示例代码如下：

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: 3">2</view>
<view class="item" style="order: 2">3</view>
<view class="item">4</view>
</view>

 运行效果：

​​​​​​​

2、flex-grow

flex-grow定义项目的放大比例，默认值为零，既不放大。语法格式如下：

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

 示例代码如下：

</view>
<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: 1">3</view>
<view class="item">4</view>
</view>

 运行效果：

3、flex-shrink

flex-shink 用来定义项目的缩小比例，默认值为,如果空间不是。该项目将被缩小语法格式如下:

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

 示例代码如下：

<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>

 运行效果：

4、flex-basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下:

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

  示例代码如下：

<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>

 运行效果：

5、flex

 flex属性是flex-grow、flex-shrink 和flex-basis 的简写，其默认值分别为0、1、auto。语法格式如下:

.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

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

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

       在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。

      auto表示继承容器align-items的属性，如果没有父元素，则等于stretch(默认值)。

。。。

IAitr
关注
  • 49
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序第三章 wxml页面渲染条件渲染
11-06
微信小程序第三章 wxml页面渲染条件渲染
微信小程序换行、空格的几种写法
qq_51985869的博客
05-31 1万+
在微信小程序中，可以使用以下几种写法实现换行和空格。使用空格字符：在文本中直接输入空格字符，例如："这是一个空格： "。使用 实体字符：在文本中使用   实体字符表示空格，例如："这是一个空格： "。
微信小程序换行处理
shi450561200的博客
05-18 6212
【代码】微信小程序换行处理。
微信小程序中的换行、空格
gyueh的博客
11-30 2万+
换行 以往的<br/>标签不能发挥效用 在<text>标签里加上\n可以实现换行 <text>第一行\n第二行\n第三行</text> <text> 第一行 第二行 第三行 </text> 最终效果： 单个空格 无论添加多少个<b标签不能发挥效用 在<view>标签里加上\t可以实现 <view>南\t半球 \t\t 与\t北海道</view> 在<text&gt
微信小程序中的text标签换行
div_336699的博客
06-28 1198
在对应的标签中添加 word-break:break-all;前提中页面中大盒子是flex布局，左边的盒子保持不变，右边的盒子flex：1；需要在标签中加上style="word-break:break-all;
微信小程序文字换行符
机智的奎哥的博客
06-24 9360
在微信小程序开发中有一个需求是展示长文本，后端返回的数据包含了\n\n 如果将这段文字直接赋值 这样并不会换行，具体解决办法如下
微信小程序第三章 wxml页面渲染引用
11-06
微信小程序第三章 wxml页面渲染引用
微信小程序第三章 wxml页面渲染模板
11-06
微信小程序第三章 wxml页面渲染模板
微信小程序第三章 wxml页面渲染列表渲染
11-06
微信小程序第三章 wxml页面渲染列表渲染
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统是当前移动互联网时代餐饮业中常见的技术应用，它利用微信小程序平台，为用户提供便捷的在线点餐服务。本项目实战教程将深入探讨如何开发这样一个系统，涵盖从设计、编码到上线的全过程。 一、...
微信小程序中换行空格（多个空格）写法详解
08-27
主要介绍了微信小程序中换行空格（多个空格）写法详解,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序中文字换行
weixin_45534301的博客
02-26 1475
微信小程序文字换行
小程序中如何正确使用换行符‘\n‘
laishaojiang的博客
05-09 1万+
大家都知道，在html中，如果你内容里面有包含\n的话，是会换行的，但是在小程序里面，如果你写在view标签中的话，是不会自动换行的，那要怎么办呢，很简单，小程序只有两个标签既然view不行，那就用text咯，试了一下果然可以 <view>第一行\n第二行</view> // 第一行\n第二行 <text>第一行\n第二行</text> //第一行 //第二行 但是，你以为就这么简单吗，这可是小程序，肯定会有坑在里面（狗头 没错，我就刚好遇到了，最近在做个
微信小程序的text标签实现换行，空格等
热门推荐
苏苏就是小苏苏的博客
11-29 3万+
1.实现效果 2.text标签 text标签内的\n会解释为换行，而\n在view标签内会被解释为空格。 text标签单个空格用\t,换行用\n。 当服务端返回的数据含有\n时候，用text标签。 3.服务端返回的\n变为\n 解决方法： 新建wxs文件： var format = function (text) { if (!text) { return } var reg = getRegExp('\\\\n', 'g') return text.replace(reg,
微信小程序换行
sinat_41034328的博客
04-01 1873
后端返回数据无法换行，原因是后端返回的\n被转译成了字符串无法识别为换行符。微信小程序换行需要使用text标签。
微信小程序文本样式（2）
m0_72168336的博客
11-29 857
微信小程序文本样式
小程序网页view多行文本超出隐藏或显示省略号
最新发布
浩冉学编程的博客
03-09 804
小程序网页view多行文本超出隐藏或显示省略号 实现效果：限制两行，超出即显示省略号实现：话不多说，展示代码 关键代码 .box{ width:100rpx; overflow:hidden; text-overflow: ellipsis;//超出省略号 display:-webkit-box; -webkit-line-clamp: 2;//显示行数 -webkit-box-orient: vertical; }
微信小程序开发-计算器案例实现【第5章】
本文档主要介绍了微信小程序开发中计算器案例实现的相关内容。通过编写计算器页面的index.json文件，实现了页面导航栏背景颜色的设置。本文档共分为5个部分：index.json文件、index.wxml文件、index.wxss文件、index...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值