微信小程序开发之——margin-left=auto 为什么可以使元素靠右

最新推荐文章于 2024-05-28 15:46:35 发布
最新推荐文章于 2024-05-28 15:46:35 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 margin-left
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Calvin_zhou/article/details/121261734
版权

一 效果对比

不设置margin-left设置margin-left

二 原因分析

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +'border-right-width' + 'margin-right' = width of containing block
  • 左外边距+左边框宽度+左内边距+容器宽度+右内边距+右边框宽度+右外边距=容器宽度
  • 不设置默认为0，单独设置了margin-left，顾左外边距等于剩余容器的宽度

三 参考

PGzxc
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
CSS 实现块级元素靠右的5种方法。
xiaoweids的博客
05-29 1万+
想要块级元素居右往往设置 margin-right: 0 属性是行不通的，下面微点阅读小编介绍五种方法，不同场景适用不同方法，感兴趣的朋友跟随小编一起看看吧HTML 如下：123想要块级元素居右往往设置属性是行不通的下面介绍五种方法，不同场景适用不同方法。
微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
油焖茄子 的博客
07-28 9224
或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。
margin-left: auto；使元素靠右
最新发布
Front小思的博客
05-28 350
今天写样式遇到一个东西，就是需要表单居右显示的，但是作用了弹性布局，其他的都不行的，一开始使用了浮动，但是使用了浮动后盒子就不继承父盒子的宽度了，移动端还行，自动回到100%状态，但是pc端宽屏的时候就被吃掉了一截！
微信小程序border padding margin
哈哈哈哈哈哈哈哈的博客
02-24 1916
微信小程序border padding margin 1.padding 定义元素边框与元素内容之间的空间。 可能的值 auto: 浏览器计算外边距 length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 %：规定基于父元素的宽度的百分比的外边距。(padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变) i...
微信小程序中，图片的位置设置
qq_53295063的博客
11-13 1万+
在编写小程序的时候，难免会涉及到图片的位置放置。以及具体的wxss格式的设置，在这里想进行一个具体格式的讲解。
微信小程序 内部组件右对齐
Venus 的博客
08-22 6170
第三章总结
c3029971364的博客
03-14 1886
其中，justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右flex-start——左对齐，默认值（a）flex-end——右对齐（b）center——居中（c）space-between——两端对齐，项目之间的间隔相等（d）space-around——每个项目两侧的间隔相等（e）其中，space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；space-around——每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框间隔大一倍。
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
微信小程序项目实例——体质计算器
05-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。...通过学习和理解这个项目，开发者可以进一步提升在微信小程序开发上的技能，同时也为健康管理领域的应用创新提供了参考。
微信小程序-微信小程序-仿豆瓣电影-demo小程序项目源码-原生开发框架-含效果截图示例.zip
05-22
跨平台兼容性：微信小程序可在多种操作系统和设备上运行，无需考虑不同平台的适配问题，为开发者提供了统一的开发环境。 丰富的API接口：微信提供了丰富的API接口，使得开发者能够轻松实现各种功能，如微信支付、...
微信小程序 图片绝对定位(背景图片)
08-30
主要介绍了微信小程序 图片绝对定位(背景图片)的相关资料,需要的朋友可以参考下
微信小程序项目实例——家居团购
06-04
微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例...
怎么让图片从左往右移动php,微信小程序内拖动图片实现移动、放大、旋转的方法...
weixin_36308543的博客
03-22 1304
屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微信小程序这里提供了两个APIwx.createContext() 创建并返回绘图上下文context对象getActions 获取当前context上存储的绘图动作，对应wx.drawCanvas(o...
微信小程序 - 使用自定义组件
随身笔记
08-29 227
在使用中，自定义组件的使用是必不可少的： 第一步：在pages同一等级创建component文件，在component创建组件gameOver。这是一个弹框 gameOver.wxml: <view hidden='{{modalHidden}}'> <view class='mask_layer' bindtap='modal_click_Hidden' /&g...
微信小程序样式Flex Box精通课程-Flex项目的属性-margin（对齐和居中）
杭州.黄老师
01-14 1451
margin（对齐和居中） 默认样式和代码 效果如图 Wxml代码 &amp;amp;lt;view class='zong'&amp;amp;gt; &amp;amp;lt;view class='fangxing1'&amp;amp;gt; &amp;amp;lt;text&amp;amp;gt;01&amp;amp;lt;/text&amp;amp;gt; &amp;amp;lt;/view&am
微信小程序css篇----外边距（margin)和内边距（padding）
小天空的博客
01-05 8052
说到边距，那这个基本上跟android里的概念差不多，先来看一个图吧，（虽然标注的丑了点，不过那不是重点） 一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rpx：...
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
热门推荐
wy313622821的博客
04-21 6万+
布局、居中、解决兼容问题。
margin-left: auto；为什么可以使的元素靠右
x1037490413的博客
01-28 1044
div { width: 100px; margin-left: auto; } margin-right 不设置的话默认是0，width 定宽之后，margin-left取值为 auto ，自动占据了剩余的全部宽度，具体见 《css权威指南》 P170 除了 width 和 margin-left 其他值都是 0 ，把宽度值带入计算得到 margin-left = 包含块的宽度-100px 。所以最终 div 会靠近包含块的右边。 ...
给我微信小程序开发之——个人中心-API(2)的源码
06-06
很抱歉，我作为一个AI语言模型，并不具备代码开发能力。但是我可以为您提供微信小程序个人中心API的相关信息和使用方法。 个人中心API是微信小程序中重要的API之一，它可以用于获取用户的个人信息、修改用户的个人信息、获取用户的订单信息等。以下是个人中心API的使用方法： 1.获取用户信息 ``` wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } }) ``` 2.修改用户信息 ``` wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo userInfo.nickName = '新昵称' userInfo.avatarUrl = '新头像url' wx.request({ url: '修改用户信息的API地址', data: userInfo, success: function(res) { console.log(res.data) } }) } }) ``` 3.获取用户订单信息 ``` wx.request({ url: '获取用户订单信息的API地址', data: { userId: '用户ID' }, success: function(res) { console.log(res.data) } }) ``` 以上是个人中心API的使用方法，需要注意的是，API地址和参数需要根据具体的业务需求进行替换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值