微信小程序のCss(一)
一.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(一)的更多相关文章
- 微信小程序css继承
在微信小程序里写的全局样式,pages里的组件是可以继承的,但是components里只能继承font和color属性.
- 微信小程序CSS之Flex布局
转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...
- 微信小程序css篇----flex模型
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
- 微信小程序css画三角形内有文字
<view class="productStatus"> <span> <em>已上架</em> </span> < ...
- 微信小程序字体设置
微信小程序css篇----字体(Font) 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "font-style font-variant font-w ...
- 微信小程序开发注意事项总结:上拉加载失效、转义字符等
1.上拉加载失效 问题背景:部分页面上拉加载失效.当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因. 解决问题: 在小程序中,官方为我们提供了原生的下 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
随机推荐
- 一段有意思的fork()程序
献上代码,不成敬意: #include <unistd.h> #include <stdio.h> int main() { int i = 0; if(fork()) i++ ...
- DotNetCore学习-1.读取Json配置并绑定到配置类实例
DotNetCore的程序的配置不再完全局限于XML文件,增加更加通用的Json配置. 读取Json配置文件的类主要在Microsoft.Extensions.Configuration命名空间下,创 ...
- [android] 手机卫士项目
按照模块组织代码的包结构:各个模块之间的业务是独立的 风行网 ----播放器 com.funshion.android.player ----下载模块 com.funshion.android.dow ...
- Gauss-Laguerre quadrature rule
% matlab script to derive the 2-point Gauss-Laguerre quadrature rule % and use it on an example % in ...
- NIO 学习笔记三:DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...
- jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()
1. html()方法: 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容. <html> <head> <met ...
- JavaScript有这几种测试
译者按: 也许你讨厌测试,但是你不得不面对它,所以至少区分一下单元测试.集成测试与功能测试?对吧... 原文: What are Unit Testing, Integration Testing a ...
- js之搜索框
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...
- instanceof和typeof的细节
我骑着小毛驴,喝着大红牛哇,哩个啷格里格朗,别问我为什么这木开心,如果活着不是为了浪荡那将毫无意义 今天来捋一捋我们平日经常用的instanceof和typeof的一些小问题 typeof: type ...
- Spring表单验证(Spring Validation)
1.基本介绍 之前在项目中做的后台验证就是Spring Validation,最近闲下来了,就来整理一下. 从Spring3.0开始,Spring MVC中提供了对java校验的API支持.在Spri ...