一.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. python解析处理snmp回显----snmp

    查看服务端配置:https://www.cnblogs.com/dpf-10/p/9175409.html 查看内容示例: D:\python>snmpwalk -v 2c -c public ...

  2. php手撸轻量级开发(二)框架加载

    先上图,有图有真相 1. 加载index文件 index文件是整个项目的唯一入口,任何请求进入项目都是走的index,只是带的参数不一样,然后再在index文件里加载其他文件,相当于把其他文件整个复制 ...

  3. C++异常的几种捕获方式

    捕获指定的类型 这样的话可以对每种异常做出不同的处理,例如: #include <iostream> using namespace std; void A(int n){ int a = ...

  4. JVM笔记——编译期的优化

    一.编译过程 解析和填充符号表的过程 插入注解处理器的注解处理过程 语义分析与字节码生成过程 二.解析和填充符号表 解析包含两个过程:词法分析和语法分析 (一)词法分析 将源代码的字符流转变成标记(T ...

  5. T-SQL:CTE用法(十)

    CTE 也叫公用表表达式和派生表非常类似 先定义一个USACusts的CTE WITH USACusts AS ( SELECT custid, companyname FROM Sales.Cust ...

  6. Node Redis 入门

    基础准备:Node.Js .npm或cnpm.redis安装 1.建立一个项目文件夹,这里命名 wxfc ,打开命令行输入 npm install redis . 因为没有创建package.json ...

  7. Hive案例05-学生成绩表综合案例

    1. 数据说明 (1) student表 hive> select * from student; # 学生ID 学生姓名 性别 年龄 所在系 # sid sname sex age dept ...

  8. ngx-echarts响应式图表

    一.代码 html代码 <!-- html --> <nz-card style="background-color: #0e0b2a;border: 0px;color: ...

  9. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  10. 【读书笔记】iOS-OCUnit-单元测试

    一,新建立一个hello工程--->在左侧会看到helloTests---->helloTests.m.如下图所示. 二,打开查看会看到如下代码. #import <UIKit/UI ...