一.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. 一段有意思的fork()程序

    献上代码,不成敬意: #include <unistd.h> #include <stdio.h> int main() { int i = 0; if(fork()) i++ ...

  2. DotNetCore学习-1.读取Json配置并绑定到配置类实例

    DotNetCore的程序的配置不再完全局限于XML文件,增加更加通用的Json配置. 读取Json配置文件的类主要在Microsoft.Extensions.Configuration命名空间下,创 ...

  3. [android] 手机卫士项目

    按照模块组织代码的包结构:各个模块之间的业务是独立的 风行网 ----播放器 com.funshion.android.player ----下载模块 com.funshion.android.dow ...

  4. Gauss-Laguerre quadrature rule

    % matlab script to derive the 2-point Gauss-Laguerre quadrature rule % and use it on an example % in ...

  5. NIO 学习笔记三:DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...

  6. jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

    1. html()方法: 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容. <html> <head> <met ...

  7. JavaScript有这几种测试

    译者按: 也许你讨厌测试,但是你不得不面对它,所以至少区分一下单元测试.集成测试与功能测试?对吧... 原文: What are Unit Testing, Integration Testing a ...

  8. js之搜索框

    目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...

  9. instanceof和typeof的细节

    我骑着小毛驴,喝着大红牛哇,哩个啷格里格朗,别问我为什么这木开心,如果活着不是为了浪荡那将毫无意义 今天来捋一捋我们平日经常用的instanceof和typeof的一些小问题 typeof: type ...

  10. Spring表单验证(Spring Validation)

    1.基本介绍 之前在项目中做的后台验证就是Spring Validation,最近闲下来了,就来整理一下. 从Spring3.0开始,Spring MVC中提供了对java校验的API支持.在Spri ...