微信小程序尺寸及外边距设置调整技巧

微信小程序尺寸已经是当下微信小程序设计最热门的话题，下面将从多方面来谈谈微信小程序尺寸及外边距设置相关的内容。

一：尺寸(Dimension)

一.尺寸属性：允许控制元素的宽和高，还可以设置行间距。

1.height：设置元素的高度。

2.line-height：设置行高。

3.min-height: 最小行高。

4.max-height：最大行高。

5.width：设置元素的宽度。

6.max-width：最大宽度。

7.min-width：最小宽度。

二.取值;auto/数字/百分比。

三.注意点：

虽然有很多的选择，不过在小程序中还是尽量用rpx吧，省的适配。

当元素设置了line-height的同时，也设置了max-height，实际取值的时候会以max-height的值显示，剩余的将隐藏。

二：外边距(margin)和内边距(padding)

说到边距，那这个基本上跟Android里的概念差不多。
一.margin：外边距;设置对象四边的外延边距。

margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

margin：20rpx：如果只提供一个，将用于全部的四边。

margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。

margin：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

某些相邻的margin会发生合并，称之为margin折叠，具体的现象就如果两个块级元素都设置了margin，那取两者之间的最大值做为两个元素的外边距。

注意：margin折叠常规认知：

margin折叠只发生在块级元素上;

浮动元素的margin不与任何margin发生折叠;

设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠;

绝对定位元素的margin不与任何margin发生折叠;

根元素的margin不与其它任何margin发生折叠.

二.padding：内边距：设置对象四边的内部边距。

padding: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

padding：20rpx：如果只提供一个，将用于全部的四边。

padding：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。

padding：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

三.margin-top，margin-right，margin-bottom，margin-left对应的分别是上右下左外边的距离，可取值：auto/数值/百分比。

四.padding-top，padding-right，padding-bottom，padding-left对应的分别是上右下左内边的距离，可取值：auto/数值/百分比。

如果你也想开发一款属于自己的小程序，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注小程序、app、网站开发

微信小程序尺寸及外边距设置调整技巧相关推荐

微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
微信小程序开发教程5：设置全局css样式
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序first-child 和 last-child 失效,设置后不起作用~
微信小程序first-child 和 last-child 失效,设置后不起作用~ 问题:在不确定有多少个子项的前提下,需要给最后一个子项添加一个样式. 使用了last-child不生效. 解决办法: ...
微信小程序循环出来的内容设置不同的样式
微信小程序循环出来的内容设置不同的样式循环出来的内容可以通过判断下标的方式添加想要的class样式或者style,例如: 设置类名 class="img {{index===1?'chan ...
微信小打卡，微信小打卡上打卡方法，被微信推荐的打卡小程序CSS margin(外边距)
<style> p {background-color:yellow; } p.margin {margin-top:100px;margin-bottom:100px;margin-ri ...
【微信小程序开发】字体样式设置
目录一.前言二.案例实现 1.编写index.wxml代码 2.编写app.wxss文件代码代码 3.编写index.wxss文件代码三.代码编译一.前言本篇文章将介绍在设计微信小程序时,利 ...
微信小程序尺寸单位rpx以及样式相关介绍
一.rpx单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rp ...
微信小程序顶部导航栏样式设置（自定义）
效果: 一.要用自定义的导航栏需要在app.json中配置(必须) 取消自带的导航栏:"navigationStyle": "custom" 目前微信小程序不支 ...

微信小程序尺寸及外边距设置调整技巧

微信小程序尺寸及外边距设置调整技巧相关推荐

最新文章

热门文章