一.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/数值/百分比。

微信小程序のCss(一)的更多相关文章

  1. 微信小程序css继承

    在微信小程序里写的全局样式,pages里的组件是可以继承的,但是components里只能继承font和color属性.

  2. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  3. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  4. 微信小程序css篇----flex模型

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...

  5. 微信小程序css画三角形内有文字

    <view class="productStatus"> <span> <em>已上架</em> </span> < ...

  6. 微信小程序字体设置

    微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...

  7. 微信小程序开发注意事项总结:上拉加载失效、转义字符等

    1.上拉加载失效 问题背景:部分页面上拉加载失效.当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因. 解决问题: 在小程序中,官方为我们提供了原生的下 ...

  8. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  9. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

随机推荐

  1. [CF718C] Sasha and Array

    Description 给定一个数列,维护两种操作 操作 \(1\),将区间 \([l,r]\) 的数字统一加 \(x\). 操作 \(2\),求 \(\sum \limits_{i=l}^r f(v ...

  2. IdentityServer4 中文文档 -5- (简介)支持和咨询选项

    IdentityServer4 中文文档 -5- (简介)支持和咨询选项 原文:http://docs.identityserver.io/en/release/intro/support.html ...

  3. [PHP] 数据结构-反转链表PHP实现

    1.常见方法分为迭代和递归,迭代是从头到尾,递归是从尾到头2.设置两个指针,old和new,每一项添加在new的后面,新链表头指针指向新的链表头3.old->next不能直接指向new,而是应该 ...

  4. jsp使用servlet实现文件上传

    1.在index.jsp中写入以下代码 <form method="post" action="demo3" enctype="multipar ...

  5. canvas动画效果新年祝福话语

    html代码 <ul id="ul"></ul> css代码 * { margin:; padding:; } ul { list-style: none; ...

  6. Vue Router滚动行为 scrollBehavior

    滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...

  7. SVN SVN合并(Merge)与拉取分支(Branch/tag)操作简介

    SVN合并(Merge)与拉取分支(Branch/tag)操作简介 合并(Merge) 例子:把对feature_branch\project_name_v3.3.7_branch的修改合并到deve ...

  8. 小程序 青少儿书画 利用engineercms作为服务端

    因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...

  9. 配置Synwrite作为Python的IDE

    先建立批处理 建立SynPython.bat ::Synwrite call Python to compile file ::Set Path @ set PATH=H:\XPprogram\Cod ...

  10. 使用VSTS的Git进行版本控制(六)——拉取请求

    使用VSTS的Git进行版本控制(六)--拉取请求 在将代码合并到主干之前,拉取请求让团队对特性分支的更改提供反馈.审阅人可以通过建议修改留下评论,并投票批准或拒绝代码. 任务1:在Visual St ...