当前位置:网站首页>微信小程序显示样式知识点总结
微信小程序显示样式知识点总结
2022-07-04 22:30:00 【宋小羽】
1. view标签之flex布局
flex即HTML中的inline,使块状元素变为行内元素
display: flex;
1.1 flex布局的方向选择
设置flex布局后,可以选择横向布局或纵向布局,共有以下四种方式
flex-direction:
row: 从左到右的水平方向为主轴
row-reverse: 从右到左的水平方向为主轴
column: 从上到下的垂直方向为主轴
column-reverse: 从下到上的垂直方向为主轴
1.2 横向与纵向布局的其他选项
- 横向布局
justify-content
flex-start 从左边开始(默认值)
flex-end 从右边开始
flex-center 水平居中对齐
space-between 两端对齐
space-around 每个元素间的距离相等,且首尾也有相等的距离
- 纵向布局
align-items
stretch 纵向填充整个容器
flex-start 从顶部开始
flex-end 从底部开始
center 纵向居中
baseline 以子元素的第一行文字对齐 ??
子view有个属性为 align-self,他有纵向布局的五个选择,再加上auto
1.3 控制view是否换行
flex-wrap:
nowrap 不换行(默认)
wrap 换行
wrap-reverse 换行,第一行在最下面
参考文档: https://www.cnblogs.com/sun8134/p/6395947.html
2. 换行, 单个空格,连续多个空格
- 换行
\n
需要注意的是,需要换行的文字,必须包裹在text
标签中 - 单个空格 可以使用
\t
,多个\t
只显示一个空格,要显示多个空格,可以使用下面的方法 - 连续多个空格 解析多个空格时 需要包裹在``标签中,若页面显示
则需要加
decode="{true}"
此处可以直接连续多个空格,都可以识别
你好 啊 哈哈哈(空格是中文字符一半大小)
你好 啊 哈哈哈(空格是中文字符大小)
你好 啊 哈哈哈(空格根据字体设置)
或
你好 啊 哈哈哈(空格是中文字符一半大小)
你好 啊 哈哈哈(空格是中文字符大小)
你好 啊 哈哈哈(空格根据字体设置)
3. 阴影效果
- 盒模型阴影
box-shadow
外阴影: box-shadow: 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色; X轴的正值表示方向为右,Y轴的正值表示方向为下 内阴影: 在外阴影的基础上加上inset
X轴的正值表示方向为左,Y轴的正值表示方向为上 - 文字阴影
text-shadow
与盒模型的外阴影的属性,功能一致 没有内阴影 参考文档: http://www.cnblogs.com/wuchuanlong/p/5980766.html
4. 渐变效果 gradients
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
// 从上到下(默认)
background: linear-gradient(red, blue);
// 从左到右
background: linear-gradient(to right, red , blue);
...
参考文档: https://blog.csdn.net/u010377372/article/details/79721725
解决"\n"无法达到换行效果
在数据库中的\n
取出时会变成\\n
,而在小程序的text组件中要达到换行的效果,则需要将\\n
转换成\n
。
解决方法:
content.replace(/\\n/g, "\n");
文档:https://blog.csdn.net/zhangying1994/article/details/86552970
边栏推荐
- Sobel filter
- Redis入门完整教程:HyperLogLog
- [cooking record] - stir fried 1000 pieces of green pepper
- 企业如何跨越数字化鸿沟?尽在云原生2.0
- 安装人大金仓数据库
- [machine learning] handwritten digit recognition
- Introducing QA into the software development lifecycle is the best practice that engineers should follow
- A complete tutorial for getting started with redis: hyperloglog
- Duplicate ADMAS part name
- The difference between Max and greatest in SQL
猜你喜欢
The Sandbox 和数字好莱坞达成合作,通过人力资源开发加速创作者经济的发展
Wake up day, how do I step by step towards the road of software testing
A complete tutorial for getting started with redis: redis shell
【OpenGL】笔记二十九、抗锯齿(MSAA)
页面关闭前,如何发送一个可靠请求
MySQL Architecture - logical architecture
Detailed explanation of heap sort code
Li Kou 98: verify binary search tree
Why is Dameng data called the "first share" of domestic databases?
NFT insider 64: e-commerce giant eBay submitted an NFT related trademark application, and KPMG will invest $30million in Web3 and metauniverse
随机推荐
About stack area, heap area, global area, text constant area and program code area
集群的概述与定义,一看就会
UML图记忆技巧
Duplicate ADMAS part name
LOGO特训营 第二节 文字与图形的搭配关系
SPSS installation and activation tutorial (including network disk link)
新版判断PC和手机端代码,手机端跳转手机端,PC跳转PC端最新有效代码
图片懒加载的原理
Redis入门完整教程:慢查询分析
【室友用一局王者荣耀的时间学会了用BI报表数据处理】
md5工具类
Logo special training camp Section V font structure and common design techniques
常用技术指标之一文读懂BOLL布林线指标
Redis入门完整教程:初识Redis
该如何去选择证券公司,手机上开户安不安全
Sword finger offer 68 - I. nearest common ancestor of binary search tree
[Lua] Int64 support
攻防世界 MISC 进阶区 can_has_stdio?
MD5 tool class
MYSQL架构——用户权限与管理