微信小程序开发padding，margin左右边距影响视图问题

最新推荐文章于 2024-07-10 21:32:33 发布

tian_nao

最新推荐文章于 2024-07-10 21:32:33 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/tian_nao/article/details/125322891

版权

微信小程序开发如果遇见同时添加padding，margin左右边距导致且盒子宽度是整个页面的100%的话会出现盒子会超出视图范围

如图页面：

在这里插入图片描述

如图代码：

哪怕只是添加padding也没办法把内容挤到视图中间来

在这里插入图片描述

这时就应该用100wh 视口单位就是你视图的宽度

在这里插入图片描述

这个时候内容就到视图中间啦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tian_nao

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序-页面开发

陆卿之的博客

01-02

3754

页面开发

微信小程序设置padding右边不起作用

海阔天空

04-06

1747

微信小程序设置padding右边不起作用

参与评论您还未登录，请先登录后发表或查看评论

微信小程序，容器横向滚动，设置padding，真机上只padding-left生效了，padding-right紧贴父容器边缘

wuxuan_的博客

01-16

565

微信小程序，容器横向滚动，设置padding，真机上只padding-left生效了，padding-right紧贴父容器边缘

微信小程序padding讲解

张媛的博客

09-12

6785

padding 就是内边距，就是说控制上下左右的边距，让界面感觉没有那么拥挤。这个意思都明白，但实战是却遇到padding有时候带1个参数、有时间带2个参数、有时间带4个参数。按照我一贯偷懒的想法，都以为第一个代表内上边距，结果这是错的！！！浪费了我好多时间！！！下面一一解释。 padding: 5px; 带一个参数，表示上下左右都是5px距离 padding: 5px 0;...

微信小程序css篇----外边距（margin)和内边距（padding）

小天空的博客

01-05

8430

说到边距，那这个基本上跟android里的概念差不多，先来看一个图吧，（虽然标注的丑了点，不过那不是重点）一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rpx：...

微信小程序页面布局

m0_74620049的博客

03-14

1933

采用Flex布局的元素的父元素称为Flex容器，而子元素则称为Flex项目。浮动（float）是CSS中的一个属性，它可以使元素向左或向右移动，其周围的元素也会重新排列。例如，当父元素仅包含浮动子元素时，父元素的高度可能会塌陷，因为其无法识别浮动元素的高度。元素的清除通常与浮动有关。通过调整外边距的大小，可以控制元素与其他元素之间的距离，从而调整页面的整体布局。常见的块元素有div、p、form、ul、li、ol、dl、dt、dd、address、fieldset、hr、menu、table等。

微信小程序样式padding理解

u012329294的专栏

03-25

2万+

原来做网站业务时，没有重视过前端开发，认为那是美工的事情，现在要自己开发微信小程序了，发现如果自己不懂，那将是一件非常懊恼的事情。看来欠下的东西迟早要还的。下面将最简单的padding样式拿出来总结一下。padding 就是内边距，就是说控制上下左右的边距，让界面感觉没有那么拥挤。这个意思都明白，但实战是却遇到padding有时候带1个参数、有时间带2个参数、有时间带4个参数。按照我一贯偷懒的想法...

【愚公系列】《微信小程序开发解析》006-视图容器组件

热门推荐

时光隧道

07-10

6万+

在微信小程序开发中，视图容器组件是构建用户界面的基础模块。它们不仅用于布局和组织页面内容，还能实现许多复杂的交互效果。无论是简单的页面布局，还是复杂的界面设计，视图容器组件都扮演着不可或缺的角色。本篇文章将深入探讨微信小程序中的视图容器组件，详细介绍其主要类型、使用方法以及在实际开发中的应用场景。我们将通过实例代码，帮助大家快速掌握这些组件的使用技巧，提高开发效率。同时，还会分享一些常见问题的解决方案以及最佳实践，希望能对各位开发者有所帮助。

微信小程序实现简单评论功能

01-20

在微信小程序中实现一个简单的评论功能，主要涉及以下几个核心知识点： 1. **WXML结构**：WXML（WeiXin Markup Language）是微信小程序的页面结构语言，类似于HTML，用于定义用户界面。在这个实例中，我们看到WXML...

微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用

时光の尘的博客

03-02

2万+

网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x：允许横向滚动。② scroll-y：允许纵向滚动。框住部分能够上下滚动。

微信小程序实现多选框功能的实例代码

10-15

在微信小程序中，实现多选框（Checkbox）功能是常见的需求，这通常用于用户可以选择多个选项的场景。本文将详细讲解如何通过实例代码来创建一个可选中的多选框列表。首先，我们需要在WXML（微信小程序的结构层语言...

微信小程序のCss（一）

weixin_30325487的博客

01-19

318

一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rp...

padding影响盒子大小的情况

qq_42318977的博客

12-16

1499

padding撑大盒子

微信小程序内外边距以及边框

m0_72168336的博客

11-30

7029

微信小程序内外边距，边框，外边框介绍

微信小程序上手篇（2）

monsterk1的博客

01-10

3752

在上一篇博文中，我们只学习了app入口文件，并获得了不少知识，在这一篇中，笔者会研究index文件来更深入了解，再次说明，能够看官方文档的最好看官方文档，上面讲的非常细致，浏览完之后再看demo会发现不一样的内容。废话不多说，我们从index.js的逻辑文件看起： //index.js //获取应用实例 var app = getApp() Page({ data: { motto:

微信小程序：margin padding position 属性

wuwuFQ的博客

07-22

1303

margin外边距 margin:10px 5px 15px 20px 上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px margin:10px 5px 15px; 上边距是 10px 右边距和左边距是 5px 下边距是 15px margin:10px 5px; 上边距和下边距是 10px 右边距和左边距是 5px margin:10px; 所有四个边距都是 10px 注意：负值是允许的。 padding外边距同margin一样使用

微信小程序view设置margin-top和margin-button无效的解决方案

qq_46170459的博客

02-13

2244

微信小程序view设置margin-top和margin-button无效的解决方案。

微信小程序width100%时padding或者border后导致超出边距的解决方案

编程之美

08-19

6337

微信小程序-关于wxml和wxss容器关于margin的一个小点

weixin_44373731的博客

04-14

1456

微信小程序-关于wxml和wxss容器关于margin的一个小点本来对应的wxml和wxss的代码如图所示，结果如下图，还在困惑为什么代码中的margin-top都没有跟预料中一样在整个weather-wrapper的下面其实是因为没有把view class='title’放到view class='weather-wrapper’的外面，margin-top是指和上一个容器之间的顶部间...

微信小程序开发怎么间隔

最新发布

03-22

### 微信小程序实现间隔效果在微信小程序开发中，可以通过多种方式来实现布局中的间隔效果。以下是几种常见的方法及其应用实例： #### 方法一：通过 `margin` 和 `padding` 设置间距 CSS 中的 `margin` 和 `padding` 是控制元素间距离的主要手段，在微信小程序中同样适用。 ```css /* 在 wxss 文件中定义样式 */ .item { margin: 10px; /* 外边距设置为 10px */ } .container { padding: 20px; /* 容器内部填充设置为 20px */ } ``` 上述代码展示了如何利用外边距和内边距来创建元素间的空白区域[^1]。 --- #### 方法二：使用 `<view>` 或其他容器组件分隔内容可以借助 `<view>` 组件作为占位符或者包裹层，从而形成视觉上的间隔。 ```html  <view class="item">商品A</view> <view style="height: 20rpx;"></view>  <view class="item">商品B</view> ``` 此方法适用于需要固定大小间隙的情况[^3]。 --- #### 方法三：换行与段落分割当涉及到文字内容时，可采用 `\n` 或者多组 `<text>` 来完成自然断句的效果。 ```html  <text>这是第一句话。</text> <text>\n这是第二句话。</text>  <text>上半部分的内容</text> <text>下半部分内容</text> ``` 这种方式适合处理较为基础的文字排版需求[^2]。 --- #### 方法四：基于 Flexbox 的动态调整 Flex 布局能够灵活应对复杂场景下的空间分配问题，推荐用于构建响应式的界面设计。 ```css /* 配合 flex-direction 属性让子项垂直排列并均匀分布 */ .parent { display: flex; flex-direction: column; justify-content: space-between; height: 300px; /* 设定父级总高 */ } .child { background-color: lightblue; width: 100%; height: 50px; } ``` 以上片段说明了怎样运用弹性盒子模型达成自动化的项目分离机制。 --- ### 总结无论是静态页面还是交互性强的应用程序，合理选用合适的工具和技术都是至关重要的。针对不同的业务逻辑挑选恰当的技术方案才能达到最佳用户体验。