微信小程序の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 ...
随机推荐
- [CF718C] Sasha and Array
Description 给定一个数列,维护两种操作 操作 \(1\),将区间 \([l,r]\) 的数字统一加 \(x\). 操作 \(2\),求 \(\sum \limits_{i=l}^r f(v ...
- IdentityServer4 中文文档 -5- (简介)支持和咨询选项
IdentityServer4 中文文档 -5- (简介)支持和咨询选项 原文:http://docs.identityserver.io/en/release/intro/support.html ...
- [PHP] 数据结构-反转链表PHP实现
1.常见方法分为迭代和递归,迭代是从头到尾,递归是从尾到头2.设置两个指针,old和new,每一项添加在new的后面,新链表头指针指向新的链表头3.old->next不能直接指向new,而是应该 ...
- jsp使用servlet实现文件上传
1.在index.jsp中写入以下代码 <form method="post" action="demo3" enctype="multipar ...
- canvas动画效果新年祝福话语
html代码 <ul id="ul"></ul> css代码 * { margin:; padding:; } ul { list-style: none; ...
- Vue Router滚动行为 scrollBehavior
滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
- SVN SVN合并(Merge)与拉取分支(Branch/tag)操作简介
SVN合并(Merge)与拉取分支(Branch/tag)操作简介 合并(Merge) 例子:把对feature_branch\project_name_v3.3.7_branch的修改合并到deve ...
- 小程序 青少儿书画 利用engineercms作为服务端
因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...
- 配置Synwrite作为Python的IDE
先建立批处理 建立SynPython.bat ::Synwrite call Python to compile file ::Set Path @ set PATH=H:\XPprogram\Cod ...
- 使用VSTS的Git进行版本控制(六)——拉取请求
使用VSTS的Git进行版本控制(六)--拉取请求 在将代码合并到主干之前,拉取请求让团队对特性分支的更改提供反馈.审阅人可以通过建议修改留下评论,并投票批准或拒绝代码. 任务1:在Visual St ...