第三章总结微信小程序

最新推荐文章于 2025-04-08 16:56:54 发布
最新推荐文章于 2025-04-08 16:56:54 发布
阅读量1.8k 收藏 40
点赞数 41
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51485373/article/details/136714411
版权
1.盒子模型

 盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容(content)、内边距(padding)、外边距(margin)、边框(border)构成 

2.块级元数与行内元素
2.1块级元素

     块级元素默认占一行高度，一行内通常只有一个块级元素，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。

使用<view>组件演示盒子模型及块级元素的代码：

<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>
2.2行内元素

    不必从新的一行开始，在界面显示不全会自动出现在下一行，不能设置长、宽、高。

<text>组件默认为行内元素，代码如下：

<view style="padding: 20px;">
<text style="border: 1px solid #0f0;">行内快元数文本1</text>
<text style="border: 1px solid #00f;margin: 10px;padding: 8px">行内快元数文本2</text>
</view>
<view style="border:1px solid #f00;display: inline;">显示不全可换行</view>
2.3行内块元素

    当元素的display属性被设置为inline-block时，元素被设置成行内块元素，能设置长、宽、高。

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

  全部的效果图展示

3.浮动与定位 
3.1元素浮动与清除

设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性定义浮动，值分别有默认值(none)、左浮动(left)、右浮动(right)。

代码如下：

 <view>box1,box2,box3 没浮动</view>
 <view style="border: 1px solid #0f0;padding: 5px;">
 <view style="border: 1px solid #00f;">box1</view>
 <view style="border: 1px solid #fc0;">box2</view>
 <view style="border: 1px solid #f00;">box3</view>
 </view>
 <view>box1 左浮动</view>
 <view style="border: 1px solid #0f0;padding: 5px;">
 <view style="border: 1px solid #00f;float: left;">box1</view>
 <view style="border: 1px solid #fc0">box2</view>
 <view style="border: 1px solid #f00">box3</view>
 </view>
 <view>box1,box2 左浮动</view>
 <view style="border: 1px solid #0f0;padding: 5px;">
 <view style="border: 1px solid #00f;float: left;">box1</view>
 <view style="border: 1px solid #fc0;float: left;">box2</view>
 <view style="border: 1px solid #f00">box3</view>
 </view>
 <view>box1,box2,box3 左浮动</view>
 <view style="border: 1px solid #0f0;padding: 5px;">
 <view style="border: 1px solid #00f;float: left;">box1</view>
 <view style="border: 1px solid #fc0;float: left;">box2</view>
 <view style="border: 1px solid #f00;float: left;">box3</view>
 </view>

效果图

clear属性用来清除浮动元素对其它元素的影响。值分别是默认值(none)、清除左浮动(left)、清除右浮动(right)、清除左右两侧浮动(both)。 

代码如下

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

效果图

3.2元数定位

在CSS中通过position属性可以实现对页面元素的精确定位。其值有默认值(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。

没有定位时的代码：

 <view>box1,box2,box3未定位</view>
 <view style="border: 1px solid #00f;width: 100px;height: 100px;">box1</view>
 <view style="border: 1px solid #fc0;width: 100px;height: 100px;">box2</view>
 <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

 相对定位(relative)时：

 <view>box1,box2,box3相对定位</view>
 <view style="border: 1px solid #00f;width: 100px;height: 100px;">box1</view>
 <view style="border: 1px solid #fc0;width: 100px;height: 100px; position:relative;left:30px;top:30px">box2</view>
 <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

 绝对定位(absolute)时：

 <view>box1,box2,box3绝对定位</view>
 <view style="border: 1px solid #00f;width: 100px;height: 100px;">box1</view>
 <view style="border: 1px solid #fc0;width: 100px;height: 100px ;position:absolute;left:30px;top:30px">box2</view>
 <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

固定定位(fixed)时：

 <view>box1,box2,box3固定定位</view>
 <view style="border: 1px solid #00f;width: 100px;height: 100px;">box1</view>
 <view style="border: 1px solid #fc0;width: 100px;height: 100px； position:fixed;left:30px;top:30px">box2</view>
 <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

效果图：

4.flex属性 

    可以简便，完整，响应式的实现各种页面布局。

4.1容器属性

flex容器支持的属性有7个

flex容器支持的属性
  1. display：设置了flex布局之后子元素的float，clear，和vertical-align属性会失效。
  2.  flex-direction：row,水平方向左端起；row-revers，水平方向右端起；column，垂直方向顶端起；column-revers，垂直方向低端

        

flex-direction示例

3.flex-wrap：当项目在一根轴线的排列位置不够时，项目是否换行。nowrap默认值；warp换行正序排列；warp-reverse换行反向

flex-flow：前两个属性的简写形式。
justify-content：与主轴方向有关，默认主轴水平对齐，方向从左到右。flex-start左对齐；flex-end右对齐；center居中；space-between项目之间的间隔相等；space-around项目两侧的间隔相等          

                    

 

 

  1. align-items：flex-start交叉轴起点对齐；flex-end终点对齐；center中线对齐；baseline根据它们的第一行文字的中线对齐；stretch如果未设置高度，项目将在交叉轴方向拉伸填充容器

align-content：当换行后出现多根轴线，可定义轴线在交叉轴的对齐方式

4.2项目属性

1.order：定义项目的排列顺序，数值越小排列越靠前。

//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:3">2</view>
  <view class="item" style="order:2">3</view>
  <view class="item">4</view>
 </view>
//wxss
.cont1{
display: flex;
}
.item{
  width: 100px;
  height: 100px;
  border: 1px solid #f66;
}

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

//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;
margin-bottom: 10px;
}
.item{
  width: 50px;
  height: 50px;
  border: 1px solid #f66;
}

3.flex-shrink：定义项目的缩小比例，默认值1。

 <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: 1;">2</view>
  <view class="item" style="flex-shrink: 2;">3</view>
  <view class="item">4</view>
 </view>

4.flex-basis：属性用来定义伸缩项目的基准值，剩余空间将按比例进行缩放。

 <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: 20px;">2</view>
  <view class="item" style="flex-basis: 200px;">3</view>
  <view class="item">4</view>
 </view>

烂抹布
关注
如何在微信小程序中使用样式和布局
m0_72166538的博客
04-12 839
在上面的例子中，container是一个容器，它使用position属性设置为relative，表示容器为相对定位。item是容器的子元素，它的宽度和高度设置为100px，item1使用position属性设置为absolute，表示将其相对于容器定位，并设置top属性和left属性为0，将其置于容器的左上角；在上面的例子中，container是一个容器，它使用grid布局，并设置了grid-template-columns属性为repeat(3, 1fr)，表示容器中有3列，每列的宽度均为1fr。
【微信小程序】引用css文件
墨夶的博客
11-15 1185
通过合理地引用和管理 WXSS 文件，可以显著提升微信小程序的样式管理和用户体验。本文介绍了如何在微信小程序中创建和引用全局样式文件、页面样式文件以及外部样式文件，并提供了一些最佳实践建议，如使用 CSS 变量和 SCSS 预处理器。希望这些内容能够帮助你在开发微信小程序时更加高效和专业。如果你有任何问题或需要进一步的帮助，请随时留言交流。😊。
【微信小程序】view内文字解决超出view不自动换行问题
weixin_62374100的博客
08-07 233
// 在css内书写 word-break:break-all;
微信小程序 view的文本不能自动换行问题
热门推荐
电鳗的博客
04-06 10万+
小程序碰到了个问题，view并不能让文本自动换行。 官方定义的view组件，display为block。 scroll-view中定义display:flex是无效的。 view中要让中文片段自动换行，需要采用white-space
CSS 实现自动换行、强制换行、强制不换行的属性
最新发布
szzlh123456789的博客
04-08 389
我需要的 这个标签内的文本两端对齐 数字不换行。
微信小程序view标签内容关于文本过长，自动换行对的问题
qq_45925420的博客
11-13 1433
文本过长，自动换行
微信小程序-canvas绘制文字实现自动换行
qsj0606的博客
03-23 1205
微信小程序-canvas绘制文字实现自动换行 在使用微信小程序canvas绘制文字时，时常会遇到这样的问题：因为canvasContext.fillText参数为 我们只能设置文本的最大宽度，这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示，光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> w
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统是当前移动互联网时代餐饮业中常见的技术应用，它利用微信小程序平台，为用户提供便捷的在线点餐服务。本项目实战教程将深入探讨如何开发这样一个系统，涵盖从设计、编码到上线的全过程。 一、...
微信聊天的微信小程序模板下载.zip
11-28
除了官方提供的资源外，网络上还有许多第三方的微信小程序模板资源，它们提供了各种各样的设计和功能，以满足不同开发者的需求。然而，选择这些第三方模板时，开发者需要仔细审查模板的质量和安全性，确保它们的性能...
微信小程序-美食列表源码
04-26
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用体验。"美食列表源码"是针对微信小程序开发者，特别是初学者的一个实践项目，它可以帮助学习者...
微信小程序开发图解案例教程 第三版
03-04
相关ppt及源码
微信小程序云开发小程序源码.zip
05-18
微信小程序云开发是一种基于微信平台的轻量级应用开发框架，它允许开发者在不搭建后端服务器的情况下，直接利用微信的云服务进行数据存储、处理和分发。这个压缩包文件"微信小程序云开发小程序源码.zip"包含了实现...
微信小程序中css常用属性
一指流沙的博客
07-14 2478
微信小程序中css常用属性
微信小程序 自动换行
UFO00001的博客
05-31 2万+
微信小程序 自动换行 在wxss中添加 ：  word-break:break-all;  即可
CSS自动换行、强制不换行、强制断行、超出显示省略号
suwu150
05-31 9万+
CSS样式设置自动换行、强制不换行、强制断行、超出显示省略号 P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。...
微信小程序开发的css技巧
weixin_45796803的博客
01-17 271
集合css样式的有效实现方式~助力新手顺利完成前端开发任务！
【微信小程序】微信小程序全局CSS样式详解：5大步骤带你轻松搞定样式统一
java专栏
11-19 869
全局CSS样式是指在整个小程序中生效的样式规则。通过设置全局样式，可以确保小程序各个页面和组件的样式保持一致，提升用户体验。通过本文的详细介绍，相信你已经掌握了微信小程序中设置和管理全局CSS样式的方法。从基础用法到进阶技巧，每一个部分都有详细的解析和示例代码，帮助你更好地管理和引用全局样式。如果你有任何疑问或需要进一步的帮助，欢迎随时留言交流。祝你在微信小程序的开发之旅中一帆风顺！希望这篇文章对你有所帮助，如果你有任何问题或需要进一步的解释，欢迎随时提问！😊。
微信小程序开发实战 ⑦（WXSS VS CSS）
m0_61490399的博客
10-04 1663
WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。✔rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信小程序 自动换行的实现
u012329294的专栏
04-04 2万+
微信小程序中的自动换行，实现代码如下：wxml： &lt;view class='header'&gt;服务类型&lt;/view&gt; &lt;view class='ff_anniu' &gt; &lt;view class='ff_item' wx:for='{{categorys}}' wx:key='{{index}}'&gt; &lt;view class='ff...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值