当前位置:网站首页>Summary of wechat applet display style knowledge points
Summary of wechat applet display style knowledge points
2022-07-04 22:58:00 【Song Xiaoyu】
1. view Label of flex Layout
flex namely HTML Medium inline, Change block elements into inline elements
display: flex;
1.1 flex Direction selection of layout
Set up flex After layout , You can choose horizontal layout or vertical layout , There are four ways
flex-direction:
row: The horizontal direction from left to right is the main axis
row-reverse: The horizontal direction from right to left is the main axis
column: The vertical direction from top to bottom is the main axis
column-reverse: The vertical direction from bottom to top is the main axis
1.2 Other options for horizontal and vertical layout
- The horizontal layout
justify-content
flex-start Start on the left ( The default value is )
flex-end From the right
flex-center align horizontal center
space-between full-justified
space-around The distance between each element is equal , And there is an equal distance between the head and the tail
- Vertical layout
align-items
stretch Fill the entire container longitudinally
flex-start Start at the top
flex-end Start at the bottom
center Vertically centered
baseline Align with the first line of text of the child element ??
Son view A property is align-self, He has five choices for vertical layout , Plus auto
1.3 control view Do you want to change lines
flex-wrap:
nowrap Don't wrap ( Default )
wrap Line break
wrap-reverse Line break , The first line is at the bottom
Reference documents : https://www.cnblogs.com/sun8134/p/6395947.html
2. Line break , Single space , Consecutive spaces
- Line break
\n
It should be noted that , Text that needs to wrap , Must be wrapped intext
In the label - Single space have access to
\t
, Multiple\t
Show only one space , To display multiple spaces , You can use the following method - Consecutive spaces When parsing multiple spaces Need to be wrapped in `` In the label , If the page displays
You need to add
decode="{true}"
You can directly connect multiple spaces here , Can recognize
Hello ah Ha ha ha ( The space is half the size of Chinese characters )
Hello ah Ha ha ha ( The space is the size of Chinese characters )
Hello ah Ha ha ha ( The space is set according to the font )
or
Hello ah Ha ha ha ( The space is half the size of Chinese characters )
Hello ah Ha ha ha ( The space is the size of Chinese characters )
Hello ah Ha ha ha ( The space is set according to the font )
3. shadows
- Box model shadow
box-shadow
Shadow of the vulva : box-shadow: Shadowy X Axis ( You can use negative values ) Shadowy Y Axis ( You can use negative values ) Shadow blur value ( size ) Color of shadow ; X The positive value of the axis indicates that the direction is right ,Y A positive value of the axis indicates that the direction is down Inner shadow : On the basis of the outer shadow, addinset
X The positive value of the axis indicates that the direction is left ,Y The positive value of the axis indicates that the direction is up - Text shadow
text-shadow
Attributes of the outer shadow with the box model , Consistent function No inner shadow Reference documents : http://www.cnblogs.com/wuchuanlong/p/5980766.html
4. Gradient effect gradients
- Linear gradient (Linear Gradients)- Down / Up / towards the left / towards the right / Diagonally
- Radial Gradient (Radial Gradients)- Defined by their center
// From top to bottom ( Default )
background: linear-gradient(red, blue);
// From left to right
background: linear-gradient(to right, red , blue);
...
Reference documents : https://blog.csdn.net/u010377372/article/details/79721725
solve "\n" Unable to achieve line feed effect
In the database \n
When taken out, it will become \\n
, And in the small program text The effect of line breaking should be achieved in the component , You need to \\n
convert to \n
.
resolvent :
content.replace(/\\n/g, "\n");
file :https://blog.csdn.net/zhangying1994/article/details/86552970
边栏推荐
- Co create a collaborative ecosystem of software and hardware: the "Joint submission" of graphcore IPU and Baidu PaddlePaddle appeared in mlperf
- 剑指 Offer 65. 不用加减乘除做加法
- MYSQL架构——逻辑架构
- Redis入门完整教程:Bitmaps
- Redis入门完整教程:Pipeline
- Redis démarrer le tutoriel complet: Pipeline
- One of the commonly used technical indicators, reading boll Bollinger line indicators
- Naacl-22 | introduce the setting of migration learning on the prompt based text generation task
- Redis introduction complete tutorial: slow query analysis
- 常用技术指标之一文读懂BOLL布林线指标
猜你喜欢
安装人大金仓数据库
Attack and defense world misc advanced area Hong
The new version judges the code of PC and mobile terminal, the mobile terminal jumps to the mobile terminal, and the PC jumps to the latest valid code of PC terminal
NFT Insider #64:电商巨头eBay提交NFT相关商标申请,毕马威将在Web3和元宇宙中投入3000万美元
MySQL Architecture - user rights and management
Redis入门完整教程:发布订阅
常用技术指标之一文读懂BOLL布林线指标
质量体系建设之路的分分合合
A complete tutorial for getting started with redis: hyperloglog
Advanced area of attack and defense world misc 3-11
随机推荐
Advanced area of attack and defense world misc 3-11
Redis入门完整教程:键管理
模拟摇杆控制舵机
P2181 对角线和P1030 [NOIP2001 普及组] 求先序排列
Unity-VScode-Emmylua配置报错解决
Google collab trample pit
9 - class
Install the gold warehouse database of NPC
Mongodb aggregation operation summary
Wake up day, how do I step by step towards the road of software testing
Advanced area a of attack and defense world misc Masters_ good_ idea
[machine learning] handwritten digit recognition
Tla+ introductory tutorial (1): introduction to formal methods
Unity vscode emmylua configuration error resolution
Feature scaling normalization
堆排序代码详解
浅聊一下中间件
攻防世界 MISC 高手进阶区 001 normal_png
集群的概述与定义,一看就会
微信小程序显示样式知识点总结